javascript - 如何在我的网站上延迟加载或预加载大背景图像？

Question

我是 JavaScript 新手。

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

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

再说一次，我想要做的就是在加载 CSS 时指定的背景图像后面有一个正在加载的 gif，这样就不会出现让访问者认为网站已损坏的大黑洞。

我正在将 LanguidLoad 用于我的 html 标签图像。所以如果你们能让它与 LanguidLoad 一起工作，那就最好了!

非常感谢!

Answer 1

您可以创建一个外部 div，并在背景中添加常量“加载”图像。然后，惰性加载器类将保存图像加载后所采用的尺寸。当图像加载到其中时，它将覆盖加载的 gif 图像。

HTML:

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

你的 CSS 可能如下所示:

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