Question

我有一个使用外部CSS加载的外部背景图像的网络应用程序。现在，可以在图像完全渲染之前使用应用程序，从而产生奇怪的视觉效果。

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

它可以使用普通的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

没有与CSS背景相关的DOM事件。您必须对图像进行计数，分配onload事件并通过JS将它们添加为new Image()，并在加载时递增计数器。

Answer 3

结帐this answer到similar question：

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

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

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

waitForImages jQuery插件


GitHub repository。

Readme。

Production source。

Development source。


使用示例
 $('selector').waitForImages(function() {
     alert('All images are loaded.');
 });
Example on jsFiddle

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

Answer 4

与我所读到的相关＆＃34;没有与CSS背景相关的DOM事件＆＃34;，实际上我的测试显示在现代浏览器中：

$(window).load(function() {
// all images loaded
});

诀窍。它只在外部CSS中加载外部图像后才会触发。

我放置了几个20+ meg的图像背景来验证。

如果这不起作用，B计划正在使用数据URI，但我很高兴它没有实现。

感谢您的回复！

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

4 个答案:

waitForImages jQuery插件

使用示例