图片预加载挑战

Question

我的目标是开始在首页（index.php）预加载大图片库网站的所有网站图片，而不会被用户感知。如果用户在所有图像加载之前点击进入网站（home.php），这肯定会发生，预加载过程应该对用户继续不可见。如果用户点击其他页面（portfolio.php等），则预加载过程再次继续。这个想法是希望每个新页面都能够完成重启，因为许多图像已经被缓存，用户不必等待所有图像预加载。

目前我正在加载所有的图像与HTML中的img元素是在一个div内的style =“display：none”。 img元素使用Javascript（LazyLoad技术）进行延迟加载，以便首先加载页面而不用等待img。

有没有更好的方法来做到这一点？

<?php 
foreach ($imageArray as $image) { 

    //code to find $fullImagePath....... 

    echo "<div><img u=\"image\" src=\" \" data-src=\"$fullImagePath\" height=\"100\"; width=\"100\"; class=\"lazy\" /></div>"; 

} // end of loop 

?>   

<script type="text/javascript"> 

$(window).bind("load", function() { 
    var timeout = setTimeout(function() { 
     $("img.lazy").each(function(){ 
      $(this).attr('src', $(this).attr('data-src')); 
     }) 
    }, 500); 
}); 

</script> 

Answer 1

虽然你在window onload事件之后从setTimeout触发它，但我并不认为这会增加很多值。

除非您正在使用本地存储（并且即使您是），缓存大小为非常有限移动设备上（和带宽使用= powerusage）。

，如果我会看到它可能来自用户可以从当前页面浏览的网页预取的图像（和其它内容？）（例如加载它们在hidde I帧？）