jQuery - 等待背景图片加载完毕后再显示元素

Question

我确实找到了一些关于如何做到这一点的地方，但要么非常不方便，要么根本行不通（那个人自己的例子也不起作用）

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

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

如果可能的话...如果可以通过类来定义这些背景图像的加载，而不是指定实际的图像名称，那将会有很大的不同...

.load-bg ~ 背景加载 ~ 显示元素..

我是在太过分了还是这是可行的？

- Joonas

Answer 1

我的插件waitForImages可以在图片加载完成时附加回调函数。

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

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

- alex

---

@prismspecs 如果背景图片更改，它不会自动触发回调函数。这是你的意思吗？ - alex

Answer 2

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

• JAIL (jQuery异步图像加载器)
• Image Loader JQuery插件
  • 注意：请参见该页面上的allcomplete事件。

此外，这里有一个可能有用的SO q/a：使用jQuery预加载图像

- entropo

Answer 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');
});

- Vin