等待CSS中的背景图像完全加载

Question

我有一个使用外部CSS加载的外部背景图像的Web应用程序.现在,可以在图像完全渲染之前使用应用程序,从而创建奇怪的视觉效果.

如何在图像完全加载之前暂停脚本执行？

它可以使用普通的JavaScript或jQuery.因为图像是在外部CSS中加载的,所以我读过的正常触发器不起作用.

Answer 1

如果你有一个带背景图片的元素,就像这样

<div id="test" style="background-image: url(link/to/image.png)"><div>

您可以通过获取图像URL并使用onload处理程序将其用于javascript中的图像对象来等待加载背景

var src = $('#test').css('background-image');
var url = src.match(/\((.*?)\)/)[1].replace(/('|")/g,'');

var img = new Image();
img.onload = function() {
    alert('image loaded');
}
img.src = url;
if (img.complete) img.onload();

Answer 2

查看类似问题的答案：

我编写了一个插件，可以在图像加载到元素中时触发回调，或者每个加载的图像触发一次。

它与 类似$(window).load(function() { .. })，但它允许您定义要检查的任何选择器。如果您只想知道#content（例如）中的所有图像何时加载，那么这个插件就是适合您的。

它还支持加载 CSS 中引用的图像，例如background-image、list-style-image等。

waitForImages jQuery 插件

• GitHub 存储库。
• 自述文件。
• 生产来源。
• 开发源泉。

用法示例

 $('selector').waitForImages(function() {
     alert('All images are loaded.');
 });

jsFiddle 上的示例。

GitHub 页面上提供了更多文档。