html js判断背景是否,js怎么判断css设置的背景图片是否成功加载

js如何判断css设置的背景图片是否成功加载

一个div用 这个css代码设置的background-image:url(a.jpg)背景图片

js如何判断css设置的背景图片是否成功加载？

有时网络缓慢会造成图片加载失败，如何判断?

------解决方案--------------------

html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

div

{

width: 500px;

height: 500px;

background-image: url(0.png);

background-color: #000000;

}

window.onload = function(){

var img=new Image();

img.src='0.png';

console.log(img)

if(img.width==0){

alert('图片加载失败')

}else{

alert('图片加载成功')

}

}

------解决方案--------------------

页面中的同一张图片会被请求一次，然后记录在缓存中，再次获取的话是从缓存中得到

按照加载先后顺序，比较简单的理解方式，是等图片加载完毕，再去设置

虽然网上有很多说可以 通过加载另一张图片 监听事件的方式来判断，但是个人认为并不尽然，可能要考虑加载顺序的问题，毕竟 window.onload是等页面加载完毕才会执行的方法，而此时背景图片已然开始请求了，所谓的监听 可能显得不太靠谱了

所以，我觉得处理方式应该是，先去加载图片，被页面缓存下来之后，再去设置相应的背景

你可能考虑如下的实现方式

$('').attr('src', 'http://picture.de/image.png').load(function() {

$(this).remove(); // prevent memory leaks as @benweet suggested

$('body').css('background-image', 'url(http://picture.de/image.png)');

});