Javascript 图像预加载挑战

我的目标是开始在首页index.php上预加载大型照片库网站的所有网站图像，而不会被用户察觉。如果用户在加载所有图像之前单击网站home.php（这肯定会发生），那么预加载过程将继续对用户不可见。如果用户单击其他页面portfolio.php等，预加载过程将再次继续。我们的想法是，希望在每个新页面中，进程不会完全重新启动，因为许多图像已经被缓存，用户不必等待所有图像预加载

目前，我正在加载所有包含html img元素的图像，这些元素位于style=display:none的div中。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>

---

虽然在窗口onload事件之后从setTimeout触发它是正确的，但我不相信这会增加很多价值

除非您使用的是本地存储，即使您是本地存储，缓存大小在移动设备上也是非常有限的，并且带宽使用率=功率使用率

---

我想看看是否可以预取图像和其他内容？从用户可以从当前页面导航到的页面，例如在hidde iframes中加载这些页面？

每次只需从头开始。它将快速跳过缓存的图像。