Javascript 首先加载特定图像，然后再加载页面的其余部分 问题:

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

在搜索之后，似乎人们要么使用分页，要么使用延迟加载——客户端已经排除了延迟加载，如果我们能够帮助的话，我们都不想分页

---

问题: 有没有一种简单的方法可以强制浏览器在加载其他图像之前加载某个div（或多个div）中的图像

---

技能：

---

我们的javascript/jquery是有限的（只能阅读其他人的说明），因此，任何正确方向的帮助或指点都将不胜感激。

您应该得到这样的图像

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

---

这样预加载图像如何（放置在头部）：

Image1=新图像（）
Image1.src=“Image1.gif”
Image2=新图像（）
Image2.src=“Image2.gif”
Image3=新图像（）
Image3.src=“Image3.gif”

资料来源：

另一种方法：

试试这个插件。该插件可以检查a容器（a div）是否已加载其中的所有图像？。检查后，如果返回true，则可以加载其他图像

例如

$（文档）.ready（函数（）{
var imgs=[“img1.jpg”、“img1.jpg”、“img1.jpg”]；
imagesLoaded（document.querySelector（“#container”）、函数（实例）{
对于（imgs中的i）{
变量img=$（“

<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>

<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>