$('body').css('background-image','http://picture.de/image.png').load(function() {
alert('Background image done loading');
// This doesn't work
});
如何确保背景图片完全加载?
$('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何时被加载。
编辑:在纯JavaScript中,可以像这样实现:
var src = 'http://picture.de/image.png';
var image = new Image();
image.addEventListener('load', function() {
body.style.backgroundImage = 'url(' + src + ')';
});
image.src = src;
可以将它抽象为一个方便的函数,返回一个 Promise:
function load(src) {
return new Promise((resolve, reject) => {
const image = new Image();
image.addEventListener('load', resolve);
image.addEventListener('error', reject);
image.src = src;
});
}
const image = 'http://placekitten.com/200/300';
load(image).then(() => {
body.style.backgroundImage = `url(${image})`;
});
javascript:void($('<img/>').attr('src', 'http://farm6.static.flickr.com/5049/5220175127_5693faf952.jpg').load(function() { $('html').css('background-image', 'url(http://farm6.static.flickr.com/5049/5220175127_5693faf952.jpg)'); }))
,然后在 Firebug 中检查 HTTP 请求。如果我在另一个标签页中打开了带有此图片的 Flickr 页面,则不会进行任何 HTTP 请求,只会立即显示这张图片。当我清除缓存并重新运行时,会发出一次请求。 - jcubic$('<img/>')
对象上调用 .remove()
来避免内存泄漏。第一个测试应该会看到稳定的内存消耗,而第二个测试则会看到内存增加。在 Chrome 28 上运行几个小时后,第一个测试占用 80MB,第二个测试占用 270MB。 - benweet我有一个名为waitForImages
的jQuery插件,它可以检测背景图片何时下载完成。
$('body')
.css('background-image','url(http://picture.de/image.png)')
.waitForImages(function() {
alert('Background image done loading');
// This *does* work
}, $.noop, true);
each
回调来展示加载进度,非常棒。 - Soviutdelay()
不是这样工作的。 - alex使用纯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>
<link>
标签进行预加载如何:<link rel="preload" href=cat.jpg as=image imagesrcset="cat.jpg 1x, cat-2x.jpg 2x"> - bytrangle对于 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();
});
}
});
bg.replace( ... , my_src )
。但我的问题是:一旦$('<img>')加载完成,那个<img>
会发生什么...我的意思是它实际上并不真实 - 它只是一个虚拟占位符,对吗? - dsdsdsdsd<img>
标签从未被插入到 DOM 中;它只是用来“欺骗”浏览器将图像文件加载到缓存中。 - ColinIf you have an element with a background image, like this
<div id="test" style="background-image: url(link/to/image.png)"><div>
You can wait for the background to load by getting the image URL and using it for an image object in javascript with an onload handler
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();
这是我制作的一个小插件,可以让您实现这一点,它还适用于多个背景图像和多个元素:
阅读文章:
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,演示了它的工作原理。
<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;
}
(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());
https://github.com/alexanderdickson/waitForImages
$('selector').waitForImages({
finished: function() {
// ...
},
each: function() {
// ...
},
waitForAll: true
});
onload
事件的Image()
对象分配相同的URL。 - Shadow The Spring Wizardurl()
中。 - bluescrubbie