当使用后退按钮时，移动浏览器上的jQuery lazyload

Question

我试图使用jquery lazyload插件来延迟加载我的webapp上的内容，并在第一次加载完美的页面时加载它。这是我使用的代码：

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

问题在于浏览器的向后导航。当用户转到新页面，然后点击后退按钮返回到使用lazyload函数的页面时，浏览器视口内的任何图像将继续延迟加载，但是视口中最后一个图像在页面改变之前不会加载并显示。因此，先前加载的图像和未完成的图像所在的下一个加载的图像之间只有空白区域。

任何人都可以想出一个解决此问题的方法，以便在导航返回时，没有完成加载的图像可以继续加载或加载新鲜图像？

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

Answer 2

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