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

我可以确认＆＃39; ImagesLoaded＆＃39;插件适合我。

像这样使用：

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