首页 > js教程 > 正文

jquery中图片无序预加载的实现以及使用方法

原创 2018-08-13 10:40:15 0 10
赞助会员专享特权
本篇文章给大家带来的内容是关于jquery中图片无序预加载的实现以及使用方法,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

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

使用方法

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

相关推荐:

jQuery对象与原生DOM对象之间的区别及转换

js对象是什么?js对象类型有哪些?js对象类型的总结

以上就是jquery中图片无序预加载的实现以及使用方法的详细内容,更多请关注php中文网其它相关文章!

  • 相关标签:jquery
  • 本文原创发布php中文网 ,转载请注明出处,感谢您的尊重!
  • 相关文章


  • 原生javascript实现分享到朋友圈功能 支持ios和android_javascript技巧
  • jQuery链式调用与show知识浅析_jquery
  • JS实现登录页面记住密码和enter键登录方法推荐_javascript技巧
  • BootstrapTable与KnockoutJS相结合实现增删改查功能【一】_javascript技巧
  • 网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
    独孤九贱(4)_PHP视频教程

    独孤九贱(4)_PHP视频教程

    江湖传言:PHP是世界上最好的编程语言。真的是这样吗?这个梗究竟是从哪来的?学会本课程,你就会明白了。 PHP中文网出品的PHP入门系统教学视频,完全从初学者的角度出发,绝不玩虚的,一切以实用、有用...

    独孤九贱(5)_ThinkPHP5视频教程

    独孤九贱(5)_ThinkPHP5视频教程

    ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架常识开始,将...

    独孤九贱(1)_HTML5视频教程

    独孤九贱(1)_HTML5视频教程

    《php.cn原创html5视频教程》课程特色:php中文网原创幽默段子系列课程,以恶搞,段子为主题风格的php视频教程!轻松的教学风格,简短的教学模式,让同学们在不知不觉中,学会了HTML知识。 ...

    ThinkPHP5实战之[教学管理系统]

    ThinkPHP5实战之[教学管理系统]

    本套教程,以一个真实的学校教学管理系统为案例,手把手教会您如何在一张白纸上,从零开始,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    PHP入门视频教程之一周学会PHP

    PHP入门视频教程之一周学会PHP

    所有计算机语言的学习都要从基础开始,《PHP入门视频教程之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术,是学习PHP必须掌握的内容,任何PHP项目的实现都离不开这部分的内容,通...

    相关视频教程

  • javascript初级视频教程 javascript初级视频教程
  • jquery 基础视频教程 jquery 基础视频教程
  • javascript三级联动视频教程 javascript三级联动视频教程
  • 独孤九贱(3)_JavaScript视频教程 独孤九贱(3)_JavaScript视频教程
  • 独孤九贱(6)_jQuery视频教程 独孤九贱(6)_jQuery视频教程
  • 相关视频章节