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 Asynchronous Image Loader)
• Image Loader JQuery Plugin
  • 注：请参阅页上的allcomplete事件。

而且，SO Q/A可能会有所帮助：Preloading images with 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'); 
});