Javascript 如何在我的站点上延迟加载或预加载大型背景图像？

我是javascript新手

我正在尝试在我的页面上延迟加载一些大的背景图像，以便人们在加载图像时看到“正在加载”的gif。我知道如何在HTML图像标签上执行此操作，但不知道如何在CSS背景图像上执行此操作

我看了一些答案，似乎没有一个是足够的。当我查看demo/jsfiddle时，有些甚至不起作用

再说一次，我想做的就是在加载CSS指定的背景图像时，在它们后面有一个加载gif，这样就不会有让访问者认为网站被破坏的巨大黑洞

我正在使用LanguaidLoad处理我的html标记图像。所以，如果你们能让它与LanguaidLoad一起工作，那将是最好的

---

非常感谢

您可以创建一个外部div，背景中有一个恒定的“加载”图像。然后，lazy loader类将保存图像加载后的维度。当图像加载到其中时，它将覆盖加载的gif图像

HTML:

---

看看渐进式jpg或交错式gif/png。也许是加载gif的更好选择。

<div class="image-cointainer">
    <div class="lazy-loader">
        <!-- Image will load here -->
    </div>
</div>

.image-container{
    background-image: url(img/loading.gif);
    background-repeat: no-repeat;
    background-position:center; 
}
.lazy-loader{
    width: 100px;   //Your image's width
    height: 100px;  //Your image's height
}