imgLoad等待图片资源加载完成后执行函数(图片预加载)

本文由清尘发表于2015-05-01 18:07最后修改于2017-12-08属于jQuery分类

修改自一个2013年写的js判断图片资源加载完成后再执行函数的代码; 当时的代码片断需要手动加入需要确定加载完的图片名称到数组,比较麻烦,修改为插件后,不需要手动添加文件名称,只需对需要确定加载完成的图片元素以及带有背影图片的元素加上class名即可。

点击查看演示

相关文章:js img onload事件绑定(判断图片加载完成)

使用说明:

$('body').imgLoad({
	//可选参数,需要确定加载完毕的图片选择器默认class为imgLoad。
	imgEle:'.imgLoad',
	//callBack为确定图片加载完成后执行的函数,默认为空。
	callBack:function(){}
});

HTML代码:

<div class="wp">
	<div id="info">图片加载中……</div>
	<img class="imgLoad" width="940" height="350" src="1.jpg" alt="">
	<img class="imgLoad" width="940" height="350" src="2.jpg" alt="">
	<img class="imgLoad" width="940" height="350" src="1.jpg" alt="">
	<img class="imgLoad" width="940" height="350" src="1.jpg" alt="">
	<div class="bg imgLoad"></div>
	<div class="bg2 imgLoad"></div>
</div>

<script src="js/jquery.min.js"></script>
<script src="js/imgLoad.js"></script>
<script>
	$(function(){
		$('img').hide();
		$('div.imgLoad').hide();

		$('body').imgLoad({
			callBack:function(){
				$('#info').html('图片加载完成');
				$('img').show();
				$('div').show();
			}
		});


	});
</script>

css代码:

/* mod css */
.header{height:30px; line-height:30px; background-color:#000; overflow:hidden; margin-bottom:20px; text-align:left;}
.header .link{ float:right; color:#fff; font-size:14px; padding-right:50px;}
.content{width:1000px; margin:0 auto; min-height:850px;}
.header .copyright{font-size:12px; color:#a1a1a1; padding: 0; margin: 0; padding-left:20px;}
.wp{width: 960px; margin: 0 auto;}
/* mod css end*/
.bg{width: 940px; height: 350px; background: url(1.jpg) left top no-repeat;}
.bg2{width: 940px; height: 350px; background: url(2.jpg) left top no-repeat;}

imgLoad.js文件内JS代码:

/**
* @author shine
* @blog https://blog.ipsfan.com/
* @version 0.1
*/ 
(function($){
	$.fn.imgLoad=function(options){
		var defaults={
			imgEle:'.imgLoad',
			callBack:function(){}
		};

		opts=$.extend(defaults,options);
		var img=this.find(opts.imgEle),
			imgNum=img.length,
			imgSrcs=[],
			imgcounter=0;

		img.each(function(){
			if($(this).attr('src')){
				var imgSrc=$(this).attr('src');
				imgSrcs.push(imgSrc);
			}else{
				var urlStr=$(this).css('backgroundImage');
				var imgSrc=(urlStr.replace(/\"/g,'')).slice(4,-1);
				imgSrcs.push(imgSrc);
			};
		});
		$.each(imgSrcs,function(i,e){
			var imgDom=$('<img>');
			imgDom.attr('src',e);
			imgDom.get(0).onload=function(){
				imgcounter+=1;
				if(imgcounter===imgNum){
					opts.callBack();
				};
			};
		});
		
	};
})(jQuery)