Home > Article > Web Front-end > Implementation and usage of unordered preloading of images in jquery

Implementation and usage of unordered preloading of images in jquery

不言Original: 2018-08-13 10:40:151517browse

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);

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>

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：The difference and conversion between jQuery objects and native DOM objectsNext article：The difference and conversion between jQuery objects and native DOM objects

See more

Implementation and usage of unordered preloading of images in jquery

Related articles