js怎么判断css设置的背景图片是否成功加载
日期：2014-05-16 浏览次数：20305 次
js如何判断css设置的背景图片是否成功加载
一个div用 这个css代码设置的background-image:url(a.jpg)背景图片
js如何判断css设置的背景图片是否成功加载？
有时网络缓慢会造成图片加载失败，如何判断?
------解决方案--------------------
------解决方案--------------------
页面中的同一张图片会被请求一次，然后记录在缓存中，再次获取的话是从缓存中得到
按照加载先后顺序，比较简单的理解方式，是等图片加载完毕，再去设置
虽然网上有很多说可以 通过加载另一张图片 监听事件的方式来判断，但是个人认为并不尽然，可能要考虑加载顺序的问题，毕竟 window.onload是等页面加载完毕才会执行的方法，而此时背景图片已然开始请求了，所谓的监听 可能显得不太靠谱了
所以，我觉得处理方式应该是，先去加载图片，被页面缓存下来之后，再去设置相应的背景
你可能考虑如下的实现方式
一个div用 这个css代码设置的background-image:url(a.jpg)背景图片
js如何判断css设置的背景图片是否成功加载？
有时网络缓慢会造成图片加载失败，如何判断?
------解决方案--------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
div
{
width: 500px;
height: 500px;
background-image: url(0.png);
background-color: #000000;
}
</style>
</head>
<body>
<div id="div"></div>
<script type="text/javascript">
window.onload = function(){
var img=new Image();
img.src='0.png';
console.log(img)
if(img.width==0){
alert('图片加载失败')
}else{
alert('图片加载成功')
}
}
</script>
</body>
</html>
------解决方案--------------------
页面中的同一张图片会被请求一次，然后记录在缓存中，再次获取的话是从缓存中得到
按照加载先后顺序，比较简单的理解方式，是等图片加载完毕，再去设置
虽然网上有很多说可以 通过加载另一张图片 监听事件的方式来判断，但是个人认为并不尽然，可能要考虑加载顺序的问题，毕竟 window.onload是等页面加载完毕才会执行的方法，而此时背景图片已然开始请求了，所谓的监听 可能显得不太靠谱了
所以，我觉得处理方式应该是，先去加载图片，被页面缓存下来之后，再去设置相应的背景
你可能考虑如下的实现方式
$('<img/>').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)');
});
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
