图像预加载挑战

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

目前，我正在使用 style="display：none" 的div 内加载所有带有 html img 元素的图像。 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>