Question

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

目前我正在使用样式=“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>

Answer 1

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

除非您使用的是localstorage（即使您正在使用），否则缓存大小非常限制在移动设备上（并且带宽使用率= powerusage）。

我会看到是否可以从用户可以从当前页面导航到的页面预取图像（和其他内容？）（例如，将它们加载到hidde iframe中？）

图像预加载挑战

1 个答案: