Implementation and usage of unordered preloading of images in jquery-JS Tutorial-php.cn

Implementation and usage of unordered preloading of images in jquery

不言

Release： 2018-08-13 10:40:15

Original

1530 people have browsed it

The content of this article is about the implementation and usage of unordered image preloading in jquery. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

/图片无序预加载
(function($){


function Preload(imgs,fns){

this.imgs=(typeof imgs==="string")?[imgs]:imgs;

this.fns=$.extend({},Preload.fns,fns);//把fns 覆盖到Preload上 然后添加到{}返回

if(this.fns.loadMethod=="unorderload"){//是无序 还是有序

this._unorderload();
}
else{

this._orderload();

}
}

Preload.fns={
loadMethod:null,//有序还是无序的方式
eachLoadImg:null, //每张图片加载完所执行的函数
allLoadImg:null //所有图片加载完所要执行的函数
}
Preload.prototype._orderload=function(){
var imgs=this.imgs,
len=imgs.length,
fns=this.fns,
num=0;
function load(){
var imgObj=new Image();
$(imgObj).on("load error",function(){
fns.each && fns.each(); //存在 才会执行
if(num<len){
load(); //没有加载完就继续加载 函数执行是有顺序的
}
else{
fns.allLoadImg && fns.allLoadImg();//加载完全部
}
});
imgObj.src=imgs[num];
num++;
}
load();
}
Preload.prototype._unorderload=function(){
var imgs=this.imgs,
len=imgs.length,
fns=this.fns,
num=0;
$.each(imgs,function(i,src){

if(typeof src!="string") return;

var imgObj=new Image();
$(imgObj).on("load error",function(){

fns.eachLoadImg && fns.eachLoadImg(num,len);

if( num==len-1){

fns.allLoadImg && fns.allLoadImg();
}
num++;
});
imgObj.src=src;

});

}
$.extend({             //给jQuery上增加新函数

preload:function(imgs,fns){

new Preload(imgs,fns);

}

});

})(jQuery);

Copy after login

How to use

<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>有序预加载</title>
  <style>
        *{margin: 0; padding: 0;}
       
           img{
            width:100%;
            vertical-align:top;
           
           }
       .imgBox{
         width:500px;
         margin:100px auto;
         
       
       }
        #prevImg, #nextImg{
          
          width:60px;
          font-size:15px;
          height:30px;
          line-height:30px;
          text-align:center;
          background: #686868;
          position:absolute;
          color:#000;
          text-decoration:none;
          margin-top:-50px;
        }

        #prevImg{
            
          left:40%;
          
        }

        #nextImg{
         
         left:55%;
        
        }

  </style>
  <script src="js/jquery-3.2.1.js"></script>
  <script src="js/unorderload.js"></script>
  <script>
     
     $(function(){
     
     
     
     var imgs=["img/0.jpg","img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg","img/6.jpg","img/7.jpg"];
     var len=imgs.length;
     var index=0;
      $.preload(imgs,{});

     $("#control-img-btn").on("click","a",function(){
         

        
          if($(this).hasClass("prevImg")){
               
                index=Math.max(0,--index);  //上一张
          }

          else{
               
               index=Math.min(len-1,++index);//下一张
          
          }

          $("#imgBox img").attr("src",imgs[index]);
     
     
     });

     });
       


  </script>
 </head>
 <body>
     <div id="imgBox">
       <img />
     </div>
     <p id="control-img-btn">
       <a href="javascript:;" id="prevImg">上一页</a>
       <a href="javascript:;" id="nextImg">下一页</a>
     </p>
 </body>
</html>

Copy after login

Related recommendations:

The difference and conversion between jQuery objects and native DOM objects

What is a js object? What are the js object types? Summary of js object types

The above is the detailed content of Implementation and usage of unordered preloading of images in jquery. For more information, please follow other related articles on the PHP Chinese website!