如何在我的网站上延迟加载或预加载大型背景图片？答案

【问题标题】：How can I lazy load or preload large background images on my site?如何在我的网站上延迟加载或预加载大型背景图片？
【发布时间】：2014-07-25 22:05:41
【问题描述】：

我是 JavaScript 新手。

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

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

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

我正在为我的 html 标记图像使用 LanguidLoad。因此，如果你们可以让它与 LanguidLoad 一起使用，那将是最好的！

非常感谢！

【问题讨论】：

看看渐进式 jpg 或隔行扫描 gif/png。也许是加载 gif 的更好选择。

标签： javascript jquery css background-image lazy-loading

【解决方案1】：

您可以在背景中创建一个带有恒定“加载”图像的外部 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
}

【讨论】：