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

本篇文章给大家带来的内容是关于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

 使用方法

nbsp;html>             有序预加载          *{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%;                }                  $(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]);               });     });                
       jquery中图片无序预加载的实现以及使用方法     
     

       上一页       下一页     

 

登录后复制

相关推荐:

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

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

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2743882.html

(0)
上一篇 2025年3月8日 03:12:37
下一篇 2025年3月5日 16:54:00

AD推荐 黄金广告位招租... 更多推荐

相关推荐

发表回复

登录后才能评论