jQuery - 等到背景图像加载然后显示元素答案

【问题标题】：jQuery - Wait till background images have loaded then show elementjQuery - 等到背景图像加载然后显示元素
【发布时间】：2011-04-15 18:48:15
【问题描述】：

我确实找到了一些地方告诉它如何做到这一点，但它要么超级不方便，要么就是不起作用..（这些人自己的例子不起作用..）

基本上，我有一些背景图像，我想同时显示它们，而不是让它们随时加载到文档中...

我不一定需要先加载它们或其他任何东西但要等到特定背景图像加载然后显示它们的父 div..

如果可能的话..如果可以将这些背景图像定义为通过类加载而不是指定实际的图像名称...就像

.load-bg ~ 后台加载 ~ 显示元素..

我是在伸手去拿月亮还是这样做可行？

【问题讨论】：

标签： jquery background load wait

【解决方案1】：

我的插件waitForImages 允许您在加载图像时附加回调。

它支持在 CSS 中引用的图像。

$('#some-container').waitForImages({
    waitForAll: true,
    finished: function() {
        // Loaded all images referenced in CSS.
    }
});

【讨论】：

@prismspecs 如果背景图像发生变化，它不会自动触发回调。你是这个意思吗？

【解决方案2】：

您可以使用带有回调的异步图像加载器来显示包含图像的 div 的事件。以下是一些异步加载器：

JAIL (jQuery Asynchronous Image Loader)
Image Loader JQuery Plugin
- 注意：请参阅该页面上的 allcomplete 事件。

另外，一个可能有帮助的 SO q/a：Preloading images with jQuery

【讨论】：

【解决方案3】：

我可以确认“ImagesLoaded”插件对我有效。

这样使用：

// jQuery
$('#container').imagesLoaded( { background: true }, function() {
  console.log('#container background image loaded');
});

// vanilla JS
imagesLoaded( '#container', { background: true }, function() {
  console.log('#container background image loaded');
});

【讨论】：