如何检查背景图像是否已加载？

我想在 body 标签上设置一个背景图片，然后运行一些代码，如下所示:

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

如何确保背景图像已经完全加载？

151616 次浏览
小开

对于 CSS 资产没有 JS 回调。

小开
最佳答案

试试这个:

$('<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 何时被加载。

编辑: 在 Vanilla JavaScript 中看起来是这样的:

var src = 'http://picture.de/image.png';
var image = new Image();
image.addEventListener('load', function() {
body.style.backgroundImage = 'url(' + src + ')';
});
image.src = src;

它可以被抽象成一个方便的函数，返回一个承诺:

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})`;
});
小开

就像这样:

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 插件称为 waitForImages，可以检测当背景图像已经下载。

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

下面是我做的一个小插件，可以让你做到这一点，它也可以在多个背景图片和多个元素上运行:

阅读这篇文章:

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-load”类，但是你可以通过像下面这样传递一个不同的函数来轻松地改变它:

<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

小开

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;
}
小开

我找到了一个更适合我的解决方案，它的优点是可以用于多个图像(本例中没有举例说明)。

来自 这个问题电视台@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();
小开

纯 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>

小开

这里有一个简单的香草黑客 ~ 

(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());

提交答案