解雇两个事件时如何避免闪烁



我编写了一个代码,我在其中配置了on -pageshow(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()" >

如果您不想显示页面最初可以添加 "display: none;"到身体标签,然后在重新加载后删除该样式。

最新更新