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