Question

我是javascript的新手。

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

我看了几个答案，但似乎都不够。当我查看demo / jsfiddle时，有些甚至不起作用。

同样，我想要做的就是在加载后我的CSS指定背景图像后面加载一个gif，这样就不会有任何空洞的黑洞让我的访问者认为该网站已被破坏。

我正在使用LanguidLoad作为我的html标签图片。因此，如果你们可以使用它来使用LanguidLoad，那将是最好的！

非常感谢！

Answer 1

您可以使用常量＆＃34; loading＆＃34;创建一个外部div。图像在背景中。然后，lazy-loader类将保存图像加载后的尺寸。当图像加载到图像中时，它将覆盖加载的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
}

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

1 个答案: