我想設置body標籤的背景圖像,然後運行一些代碼 - 這樣的:如何檢查背景圖片是否已加載?
$('body').css('background-image','http://picture.de/image.png').load(function() {
alert('Background image done loading');
// This doesn't work
});
我怎樣才能確保背景圖像滿載?
我想設置body標籤的背景圖像,然後運行一些代碼 - 這樣的:如何檢查背景圖片是否已加載?
$('body').css('background-image','http://picture.de/image.png').load(function() {
alert('Background image done loading');
// This doesn't work
});
我怎樣才能確保背景圖像滿載?
試試這個:
$('<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時被檢測到。
事情是這樣的:
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();
});
}
});
我有一個名爲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);
這個插件也很棒,能夠顯示加載進度使用''each'回調。 – Soviut
@alex,我應該如何檢查每個背景圖像中的每個元素?我嘗試過,但似乎沒有做到這一點。$('。user_main_photo_thumb')。 waitForImages(function(){ \t $(this).parents('。photoThumbFrame')。delay(1000).slideDown(); \t},function(loaded,count,success){ \t}); – Relm
@Relm你沒有正確使用它。第二個回調是每個圖像。另外,'delay()'不能像那樣工作。 – alex
這裏是一個小插件,我做了讓你做的正是這一點,它也適用於多重背景圖像和多個元素:
閱讀文章:
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。
作品非常好! – Vickel
如果失敗會怎麼樣? –
https://github.com/alexanderdickson/waitForImages
$('selector').waitForImages({
finished: function() {
// ...
},
each: function() {
// ...
},
waitForAll: true
});
我做了一個純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;
}
相同的URL就分配給'圖片()'對象,它確實有'onload'事件。 –
請確保將css url包裝在'url()' – bluescrubbie