當兩個事件被觸發時如何避免閃爍

我已經編寫了一個代碼，我已經配置了OnPageShow（event）來檢查頁面是否來自緩存。如果頁面來自緩存，則重新加載相同的頁面以打擊服務器。但是在做這件事時，會出現屏幕閃爍問題。原因是當我點擊瀏覽器後退按鈕時，首先從緩存加載並顯示頁面，然後在完成加載之後，它將進入OnPageShow方法，該方法會再次刷新頁面。有什麼辦法可以避免閃爍問題嗎？當兩個事件被觸發時如何避免閃爍

下面是代碼：

function RefreshloadWindow() 
{ 
    if(!(window.performance && window.performance.navigation.type == 2)) 
    { 
     console.log("In On Load"); 
     GetLatestBreadcrum(); 
    } 
} 
function GetLatestBreadcrum() 
{ 
    console.log("In Breadcrum function"); 
    var matches=[]; 
    var divElements=document.getElementById("breadCrumDiv").children; 
    console.log(divElements); 
    var j=0; 
    for(i=0;i<divElements.length;i++) 
    { 
     //console.log(divElements[i].tagName); 
     if(divElements[i].tagName=="A") 
     { 
      matches[j]=divElements[i]; 
      j++; 
     } 
    } 
    for(z=0;z<matches.length;z++) 
    { 
     console.log(matches[z]); 
    } 
    var lastElement=matches.length; 
    //matches[lastElement-1].click(); 
    window.name=matches[lastElement-1]; 
    console.log(window.name); 
} 
function IsPagePersisted(event) 
{ 
    if(event.persisted || window.performance && window.performance.navigation.type == 2) 
    { 
     //console.log("From Cache 2"); 
     var iLink=document.createElement('A'); 
     iLink.href=window.name; 
     GetLatestBreadcrum(); 
     iLink.click(); 
    } 
}

和身體標籤如下：

<body onpageshow="IsPagePersisted(event)" onload="RefreshloadWindow()" >

來源

2017-02-23 Ishwar .Patil

請分享您擁有的代碼 –

備註 - 當您更新帖子時，評論者不會自動ping通。如果你想要ping他們（很好的做法），請用@ –

添加評論。我不知道這件事。感謝您的通知。 –

如果你不想一開始顯示頁面，您可以添加 "display: none;" body標籤和然後在重新加載後刪除該樣式。

來源

2017-02-23 08:52:56

是的，你是正確的。但是我設計了一個過濾機制，當緩存條目出現時會變得混亂起來。所以我需要重新加載頁面，至少要照顧過濾器。直到頁面刷新，它不會打到服務器來照顧過濾器。 –

當兩個事件被觸發時如何避免閃爍

回答

相關問題