2

我正在尝试使用 jquerylazyload 插件在我的 webapp 上延迟加载内容，并且在第一次加载页面时它可以完美运行。这是我使用的代码：

    $(".lazy").lazyload({         
        effect : "fadeIn",
        container: $("#wrapper")
    });

问题在于浏览器的向后导航。当用户进入一个新页面，然后使用延迟加载功能点击后退按钮返回到该页面时，任何不在浏览器视口内的图像将继续延迟加载，但任何在视口内最后没有的图像'在页面更改之前未完成加载和显示将不会加载。因此，在先前加载的图像和未完成图像所在的下一个加载图像之间只有空白空间。

谁能想到解决这个问题的方法，以便在导航回来时未完成加载的图像继续加载或加载新的？

4

2 回答 2

0

阅读了一些文档后，我能够使用以下命令在所有浏览器中运行它：

function myLoadHandler(evt)
{
    if (evt.persisted) {

        $(".lazy").lazyload({         
            effect : "fadeIn",
            container: $("#wrapper")
        });

        return;
    }

        $(".lazy").lazyload({         
            effect : "fadeIn",
            container: $("#wrapper")
        });
}

function myUnloadHandler(evt)
{
    if (evt.persisted) {
        $.noop();

        return;
    }

    $.noop();
}

if ("onpagehide" in window) {
    window.addEventListener("pageshow", myLoadHandler, false);
    window.addEventListener("pagehide", myUnloadHandler, false);
} else {
    window.addEventListener("load", myLoadHandler, false);
    window.addEventListener("unload", myUnloadHandler, false);
}
于 2012-08-02T04:09:37.013 回答
0

这是由后向缓存引起的。更好的解释可以在问题 Mobile Safari back button中找到。显然问题只影响 iOS5 Mobile Safari。这已在1.8.2中修复。

于 2013-01-27T11:35:10.310 回答