Maison > Article > interface Web > Implémentation et utilisation du préchargement non ordonné d'images dans jquery

Implémentation et utilisation du préchargement non ordonné d'images dans jquery

不言original: 2018-08-13 10:40:151517parcourir

Le contenu de cet article concerne la mise en œuvre et l'utilisation du préchargement d'images non ordonné dans jquery. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

/图片无序预加载
(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);

Comment utiliser

<!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>

Recommandations associées :

La différence et la conversion entre les objets jQuery et les objets DOM natifs

Qu'est-ce qu'un objet js ? Quels sont les types d’objets js ? Résumé des types d'objets js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：La différence et la conversion entre les objets jQuery et les objets DOM natifsArticle suivant：La différence et la conversion entre les objets jQuery et les objets DOM natifs

Articles Liés

Voir plus