当两个事件被触发时如何避免闪烁

我已经编写了一个代码，我已经配置了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

是的，你是正确的。但是我设计了一个过滤机制，当缓存条目出现时会变得混乱起来。所以我需要重新加载页面，至少要照顾过滤器。直到页面刷新，它不会打到服务器来照顾过滤器。 –

当两个事件被触发时如何避免闪烁

回答

相关问题