我想设置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