等待CSS中的背景图像完全加载
我有一个使用外部CSS加载的外部背景图像的Web应用程序。 现在，可以在图像完全渲染之前使用应用程序，从而创建奇怪的视觉效果。
如何在图像完全加载之前暂停脚本执行？
它可以使用普通的JavaScript或jQuery。 因为图像是在外部CSS中加载的，所以我读过的正常触发器不起作用。
如果你有一个带有背景图片的元素，就像这样
您可以通过获取图像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();
没有与CSS背景相关的DOM事件。 您必须计算图像，分配onload事件并通过JS将它们添加为new Image() ，在加载时递增计数器。
看看这个 类似问题的 答案 ：
我写了一个插件，可以在图像加载元素时触发回调，或者每个图像加载时触发一次。
它类似于
$(window).load(function() { .. })，除了它允许你定义任何要检查的选择器。 如果您只想知道#content（例如）中的所有图像何时加载，那么这就是您的插件。它还支持加载CSS中引用的图像，例如
background-image，list-style-image等。waitForImages jQuery插件
- GitHub存储库 。
- 自述 。
- 生产来源 。
- 发展来源 。
示例用法
$('selector').waitForImages(function() { alert('All images are loaded.'); });关于jsFiddle的示例 。
GitHub页面上提供了更多文档。
与我所读到的“没有与CSS背景相关的DOM事件”相反，事实上我的测试显示在现代浏览器中：
$(window).load(function() { // all images loaded });
诀窍。 它只在外部CSS中加载外部图像后才会触发。
我放置了几个20+ meg的图像背景来validation。
如果这不起作用，Plan B正在使用数据URI，但我很高兴它没有达到这一点。
谢谢你的回复！