js怎么判断css设置的背景图片是否成功加载-JavaSript-爱易网页

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

日期：2014-05-16　浏览次数：20292 次

js如何判断css设置的背景图片是否成功加载
一个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)');

});

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

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

相关资料更多>

推荐阅读更多>