使用后退按钮时移动浏览器上的 jQuery 延迟加载答案

【问题标题】：jQuery lazyload on mobile browsers when using back button使用后退按钮时移动浏览器上的 jQuery 延迟加载
【发布时间】：2012-08-01 19:27:49
【问题描述】：

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

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

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

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

【问题讨论】：

仍然没有运气。有人吗？

标签： jquery lazy-loading

【解决方案1】：

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

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);
}

【讨论】：

如果条件通过或失败，您的“myLoadHandler”和“myUnloadHandler”方法会执行完全相同的操作。删掉无用的代码（为孩子们）。 ;)

【解决方案2】：

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

【讨论】：