jQuery - 等待背景图像加载然后显示元素

Question

我确实找到了一些地方，告诉他们如何执行此操作，但它要么超级不方便，要么根本不起作用..（这些人自己的示例不起作用..）

基本上我有背景图像，我想在同时而不是让它们在需要时加载到文档中...

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

那样，那会有很大的不同

另外，如果可能的话......如果这些背景图像可以定义为通过类加载而不是指定实际的图像名称......就像.load-bg ~ background load ~ show element

。我是要到达月球还是这是可行的？

Answer 1

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

它支持 CSS 中引用的图像。

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

Answer 2

您可以使用异步图像加载器，并回调显示保存图像的 div 的事件。以下是一些异步加载器：

• JAIL（jQuery 异步图像加载器）
• 图像加载器 JQuery 插件
  • 注意：请参阅该页面上的 allcomplete 事件。

另外，一个可能有用的问题解答：使用 jQuery 预加载图像

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