Question

问题：

我们有一个页面可以加载几百个图像（92％的请求和页面上的字节来自图像），并且正在寻找在加载其余部分之前在某个div（大约20个图像）中加载图像的方法页面上的图像。

搜索后，似乎人们使用分页或延迟加载 - 客户端已经排除了延迟加载，如果我们可以帮助它们，我们都不想分页。

问题：

是否有一种简单的方法可以强制浏览器在加载其余图像之前在某个div（或多个div）中加载图像？

技能：

我们的javascript / jquery是有限的（阅读其他人的指示） - 所以任何帮助或指示正确的方向将非常感激。

Answer 1

你应该得到你的图像

window.on('load',function(){
//functionality to get images for the later load from server
})

Answer 2

如何预装图像（放在头部）：

<script type="text/javascript">

Image1 = new Image()
Image1.src = "image1.gif"

Image2 = new Image()
Image2.src = "image2.gif"

Image3 = new Image()
Image3.src = "image3.gif"

</script>

来源：http://www.htmlgoodies.com/tutorials/web_graphics/article.php/3480001

另一种方式：http://perishablepress.com/a-way-to-preload-images-without-javascript-that-is-so-much-better/

Answer 3

试试这个插件http://imagesloaded.desandro.com/。该插件可以检查容器（div）是否已加载所有图像？检查后，如果返回true，则可以加载其他图像。

例如。

<div id="container">
    <img src="first images to be loaded">
    <img src="first images to be loaded">
    <img src="first images to be loaded">
    <img src="first images to be loaded">
    <img src="first images to be loaded">
    <img src="first images to be loaded">
</div>
<div id="otherImgs"><div>
    <script>
        $(document).ready(function(){
            var imgs = ["img1.jpg","img1.jpg","img1.jpg"];
            imagesLoaded( document.querySelector('#container'), function( instance ) {
                for(i in imgs){
                    var img = $("<img />").attr('src', "test/"+imgs[i]);
                    $("#otherImgs").append(img);
                }
            });
        });
    </script>

在加载页面的其余部分之前，首先加载特定图像

问题：

问题：

技能：

3 个答案: