如何檢查背景圖片是否已加載？

Question

我想設置body標籤的背景圖像，然後運行一些代碼 - 這樣的：

$('body').css('background-image','http://picture.de/image.png').load(function() { 
    alert('Background image done loading'); 
    // This doesn't work 
}); 

我怎樣才能確保背景圖像滿載？

Answer 1

試試這個：

$('<img/>').attr('src', 'http://picture.de/image.png').on('load', function() { 
    $(this).remove(); // prevent memory leaks as @benweet suggested 
    $('body').css('background-image', 'url(http://picture.de/image.png)'); 
}); 

這會在內存中創建新的圖像，並使用load事件被加載在src時被檢測到。

Answer 2

CSS資產沒有JS回調。

Answer 3

事情是這樣的：

var $div = $('div'), 
    bg = $div.css('background-image'); 
    if (bg) { 
    var src = bg.replace(/(^url\()|(\)$|[\"\'])/g, ''), 
     $img = $('<img>').attr('src', src).on('load', function() { 
     // do something, maybe: 
     $div.fadeIn(); 
     }); 
    } 
}); 

Answer 4

我有一個名爲jQuery plugin時waitForImages背景圖片下載，可以檢測。

$('body') 
    .css('background-image','url(http://picture.de/image.png)') 
    .waitForImages(function() { 
    alert('Background image done loading'); 
    // This *does* work 
    }, $.noop, true); 

Answer 5

這裏是一個小插件，我做了讓你做的正是這一點，它也適用於多重背景圖像和多個元素：

閱讀文章：

http://catmull.uk/code-lab/background-image-loaded/

或直接進入插件代碼：

http://catmull.uk/downloads/bg-loaded/bg-loaded.js

所以只包含插件，然後調用它的元素：

<script type="text/javascript" src="http://catmull.uk/downloads/bg-loaded/bg-loaded.js"></script> 
<script type="text/javascript"> 
    $('body').bgLoaded(); 
</script> 

顯然下載該插件並將其存儲在自己的主機。

默認情況下，一旦在後臺加載，但你可以很容易地改變，通過傳遞一個不同的功能像這樣增加了額外的「BG-裝」類每一個匹配元素：

<script type="text/javascript" src="http://catmull.uk/downloads/bg-loaded/bg-loaded.js"></script> 
<script type="text/javascript"> 
    $('body').bgLoaded({ 
     afterLoaded : function() { 
     alert('Background image done loading'); 
     } 
    }); 
</script> 

這裏證明它正在工作的codepen。

http://codepen.io/catmull/pen/Lfcpb

Answer 6

https://github.com/alexanderdickson/waitForImages

$('selector').waitForImages({ 
    finished: function() { 
     // ... 
    }, 
    each: function() { 
     // ... 
    }, 
    waitForAll: true 
}); 

Answer 7

我做了一個純JavaScript破解使之成爲可能。

<div class="my_background_image" style="background-image: url(broken-image.jpg)"> 
<img class="image_error" src="broken-image.jpg" onerror="this.parentElement.style.display='none';"> 
</div> 

或者

onerror="this.parentElement.backgroundImage = "url('image_placeHolder.png')"; 

CSS：

.image_error { 
    display: none; 
}