我想在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。
我有一个jQuery插件称为waitForImages
当背景图片下载,可以检测。
$('body')
.css('background-image','url(http://picture.de/image.png)')
.waitForImages(function() {
alert('Background image done loading');
// This *does* work
}, $.noop, true);
CSS资产没有JS回调。
像这样:
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();
});
}
});
纯JS解决方案,它将添加预加载器,设置背景图像,然后将其与事件监听器一起设置为垃圾回收:
精简版:
const imageUrl = "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png";
let bgElement = document.querySelector("body");
let preloaderImg = document.createElement("img");
preloaderImg.src = imageUrl;
preloaderImg.addEventListener('load', (event) => {
bgElement.style.backgroundImage = `url(${imageUrl})`;
preloaderImg = null;
});
具有更好的不透明度过渡,时间更长:
const imageUrl = "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png";
let bgElement = document.querySelector(".bg-lazy");
bgElement.classList.add("bg-loading");
let preloaderImg = document.createElement("img");
preloaderImg.src = imageUrl;
preloaderImg.addEventListener('load', (event) => {
bgElement.classList.remove("bg-loading");
bgElement.style.backgroundImage = `url(${imageUrl})`;
preloaderImg = null;
});
.bg-lazy {
height: 100vh;
width: 100vw;
transition: opacity 1s ease-out;
}
.bg-loading {
opacity: 0;
}
<div class="bg-lazy"></div>
这是我制作的一个小插件,可让您执行此操作,它也可用于多个背景图像和多个元素:
阅读文章:
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-loaded”类,但是您可以通过向其传递一个不同的函数来轻松地更改它,如下所示:
<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
我找到了一个对我来说效果更好的解决方案,它的优点是可以用于多个图像(本示例中未说明的情况)。
来自@adeneo对这个问题的回答:
如果您的元素带有背景图像,则像这样
<div id="test" style="background-image: url(link/to/image.png)"><div>
您可以通过获取图像URL并将其用于带有onload处理程序的javascript中的图像对象来等待背景加载
var src = $('#test').css('background-image'); var url = src.match(/\((.*?)\)/)[1].replace(/('|")/g,''); var img = new Image(); img.onload = function() { alert('image loaded'); } img.src = url; if (img.complete) img.onload();
我做了一个纯JavaScript hack来使之成为可能。
<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;
}
https://github.com/alexanderdickson/waitForImages
$('selector').waitForImages({
finished: function() {
// ...
},
each: function() {
// ...
},
waitForAll: true
});
这是一个简单的香草技巧〜
(function(image){
image.onload = function(){
$(body).addClass('loaded-background');
alert('Background image done loading');
// TODO fancy fade-in
};
image.src = "http://picture.de/image.png";
})(new Image());
文章标签:javascript , jquery
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!
评论已关闭!