判断图片是否全部加载

最新推荐文章于 2022-03-16 13:11:50 发布

水中残月

最新推荐文章于 2022-03-16 13:11:50 发布

阅读量697

点赞数

分类专栏： HTML5 javascript

本文链接：https://blog.csdn.net/sonnylight/article/details/53506551

版权

HTML5 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

javascript

2 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>JS判断图片加载</title>
	<script src="jquery.js"></script>
	<style>
       *{
       	padding:0;
       	margin:0;
       }
	</style>
</head>
<body>
	<img src="images/1.jpg" alt="">
	<img src="images/2.jpg" alt="">
	<img src="images/3.jpg" alt="">
	<img src="images/4.jpg" alt="">
	<img src="images/5.jpg" alt="">
	<img src="images/6.jpg" alt="">
	<img src="images/7.jpg" alt="">
	<img src="images/8.jpg" alt="">
	<img src="images/9.jpg" alt="">
	<img src="images/10.jpg" alt="">
	<img src="images/11.jpg" alt="">
	<img src="images/22.jpg" alt="">
	<script>
		var imgdefereds=[];
		var n=$("img").length;
		$('img').each(function(){
		 var dfd=$.Deferred();     //deferred对象是Jquery回调函数的解决方案，即某些耗时很长的JS操作之后执行，比如AJAX，它允许你为多个事件指定一个回调函数，用$.when().down().fail() $.when()的参数只能是deferred对象，如果不是，则done会立即执行：
		 $(this).bind('load',function(){
		 dfd.resolve();
		 }).bind('error',function(){
		 // 图片加载错误，加入错误处理
		 // dfd.resolve();
		 console.log("加载失败!错误图片的路径为:"+$(this).attr("src"));
		 dfd.reject();  //dtd.resolve()的意思是，将dtd对象的执行状态从"未完成"改为"已完成"，从而触发done()方法。dtd.reject()相反
		 })
		 if(this.complete) setTimeout(function(){
		 dfd.resolve();
		 },1000);
		 imgdefereds.push(dfd);  //把每个图片的加载结果放在数组中
		})
		$.when.apply(null,imgdefereds).done(function(){   //
		   //callback
		   alert("图片加载完发毕");
		}).fail(function(){
			console.log("error");
		});
	</script>
</body>
</html>

水中残月

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
判断图片是否全部加载

JS判断图片加载 *{ padding:0; margin:0; } var imgdefereds=[]; var n=$("img").length; $('img').each(function(){ var dfd=$.Deferred();
复制链接

扫一扫

专栏目录