图片预加载2

来源：互联网发布：龙门式加工中心编程编辑：程序博客网时间：2024/06/05 15:12

上一篇实现了简单的图片无序加载功能，本篇主要是要将无须加载的功能提取出来，扩展到jQuery中作为插件中，方便其他地方使用

新建一个Perload.js，然后在index.html中引入该js，在闭包模式下，创建构造函数，以及默认DEFULATS对象，构造函数中接收两个参数，分别为图片路径，以及需要操作的对象

(function($){//构造函数,必须与文件名一致function Perload(imgs,options){//如果传过来的值是字符串，则将其包成数组，否则说明传过来的是数组，不用包this.imgs=(typeof imgs==='string')?[imgs]:imgs;//将右边两个对象融合（最右边的对象覆盖中间的对象），生成新的对象this.opts=$.extend({}, Perload.DEFULATS, options);}Perload.DEFULATS={choose:'oredered',each:null,//每张图片加载完后执行all:null//所有图片加载完后执行}})(jQuery)

接着就是无序加载的方法，并且在构造函数中调用

//写在原型链上，使对象实例化时保持一份Perload.prototype._unoredered=function(){//无序加载var imgs=this.imgs;varopts=this.opts;var count=0;var len=imgs.length;$.each(imgs, function(i,src) {//如果不是字符串，则跳出if(typeof src !='string' ) return;var imgObj=new Image()$(imgObj).on('load error',function(){//如果前边的optes.each不为null，则执行后面的方法opts.each&&opts.each(count);if(count>=len-1){//加载完毕后隐藏//如果前边的optes.all不为null，则执行后面的方法opts.all&&opts.all();}document.title='1'+'/'+lencount++;})imgObj.src=src;});}

再扩充到jQuery类中，可直接通过$调用

$.extend({perload:function(imgs,opts){new Perload(imgs,opts)}});

最后在index.html中调用，分别将两个参数传过去即可

var index=0;len = imgurls.length;//加载工具方法$.perload(imgurls,{choose:'unordered',each:function(count){$('#progress').html(Math.round((count+1)/len*100)+'%')},all:function(){$('.loading').hide();document.title='1/'+len;}})

index.html

<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><title>图片预加载无序加载</title><script src="../js/jquery-2.1.0.js" ></script><style>html,body{width: 100%;}.content{text-align: center;}a{/*去除下划线*/text-decoration: none;}img{/*设置一边,另一边会自动适应*/height: 540px;}.btn{/*内联标签,无法设置高度，需要转换为inline-block*/display: inline-block;height: 30px;line-height: 30px;padding: 0 10px;margin-right: 50px;color: #333;border-radius: 5px;border: 1px solid gray;}.btn:hover{background-color: #eee;}.loading{position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: #EEEEEE;text-align: center;}#progress{font-size: 30px;margin-top: 300px;}</style></head><body><div class="content"><img id="img" src="http://pic36.photophoto.cn/20150806/0020033010710307_b.jpg" /><p><a href="javascript:;" data-control = "prev" class="btn">上一页</a><a href="javascript:;" data-control = "next" class="btn">下一页</a></p></div><div class="loading"><p id="progress">0%</p></div><script src="../js/perload.js"></script><script>imgurls=['http://pic36.photophoto.cn/20150806/0020033010710307_b.jpg','http://scimg.jb51.net/allimg/160711/105-160G1120502414.jpg','http://pic26.photophoto.cn/20130130/0020032918859808_b.jpg','https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1496208088700&di=67c4e9fa0cad3b11e314a1c9369d9e08&imgtype=0&src=http%3A%2F%2Fimg2.niutuku.com%2Fdesk%2F1207%2F1043%2Fntk120541.jpg','https://timgsa.baidu.com/timg?image&quality=80&size=b10000_10000&sec=1496198047&di=7074c556d82b98c6e273e3a3b9e370f3&src=http://img5q.duitang.com/uploads/item/201506/09/20150609092221_xcwEW.jpeg']var index=0;len = imgurls.length;//加载工具方法$.perload(imgurls,{each:function(count){$('#progress').html(Math.round((count+1)/len*100)+'%')},all:function(){$('.loading').hide();document.title='1/'+len;}})$('.btn').click(function(){if($(this).data('control')==='prev'){//上一页index=Math.max(0,--index)}else{//下一页index=Math.min(len-1,++index)}document.title=(index+1)+"/"+len$('#img').attr('src',imgurls[index])})</script></body></html>

Perload.js

(function($){//构造函数,必须与文件名一致function Perload(imgs,options){//如果传过来的值是字符串，则将其包成数组，否则说明传过来的是数组，不用包this.imgs=(typeof imgs==='string')?[imgs]:imgs;//将右边两个对象融合（最右边的对象覆盖中间的对象），生成新的对象this.opts=$.extend({}, Perload.DEFULATS, options);this._unoredered();}Perload.DEFULATS={each:null,//每张图片加载完后执行all:null//所有图片加载完后执行}//写在原型链上，使对象实例化时保持一份Perload.prototype._unoredered=function(){//无序加载var imgs=this.imgs;varopts=this.opts;var count=0;var len=imgs.length;$.each(imgs, function(i,src) {//如果不是字符串，则跳出if(typeof src !='string' ) return;var imgObj=new Image()$(imgObj).on('load error',function(){//如果前边的optes.each不为null，则执行后面的方法opts.each&&opts.each(count);if(count>=len-1){//加载完毕后隐藏//如果前边的optes.all不为null，则执行后面的方法opts.all&&opts.all();}document.title='1'+'/'+lencount++;})imgObj.src=src;});}$.extend({perload:function(imgs,opts){new Perload(imgs,opts)}});})(jQuery)

阅读全文

0 0