/图片无序预加载

(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 lang="en">

 <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 class="imgBox" id="imgBox">

       <img />

     </div>

     <p id="control-img-btn">

       <a href="javascript:;" id="prevImg" class="prevImg">上一页</a>

       <a href="javascript:;" id="nextImg" class="nextImg">下一页</a>

     </p>

 </body>

</html>

jquery 图片预加载的更多相关文章

  1. jquery实现图片预加载

    使用jquery实现图片预加载提高页面加载速度和用户体,本就为大家详细分析jquery图片预加载的实现原理. 什么时候使用图片预加载? 如果页面使用了很多不是最初加载便可见的图片,有必要进行预加载: ...

  2. 转载：用Jquery实现的图片预加载技术，可以实现有序加载和无序加载！

    一.背景 我们在做页面的时候,从用户体验的角度出发,肯定是希望用户以最快的速度看到完整的页面信息,但在实际情况中经常会遇到些问题. 比如受网速影响,页面加载素材的时间比较长,页面会出现短时间的错乱或者 ...

  3. 闭包，jQuery插件的写法：图片预加载

    最近做的一些网页,单个网页图片量都比较大,网络不好的情况下,特别卡,这个图片预加载的方法可以牺牲一些时间换来网页的浏览顺畅,还是值得的. //闭包的写法,它内部的变量都是局部的,不会和外部巳有的变量进 ...

  4. jquery.imgpreload.min.js插件实现页面图片预加载

    页面分享地址: http://wenku.baidu.com/link?url=_-G8miwbgDmEj6miyFtjit1duJggBCJmFjR2jky_G1VftD9eS9kwGOlFWAOR ...

  5. jquery实现图片预加载提高页面加载速度

    使用jquery实现图片预加载提高页面加载速度和用户体 我们在做网站的时候经常会遇到这样的问题:一个页面有大量的图片导致页面加载速度缓慢,经常会出现一个白页用户体验很不好.那么如何解决这个问题 呢?首 ...

  6. 图片预加载的插件使用-jquery.imgpreload.min.js

    使用方法: //图片预加载 var the_images = [];//新建一个数组,然后将要加载的图片地址推入这个数组中: the_images.push( 'bg.jpg' ); var load ...

  7. 【JQuery Zepto插件】图片预加载

    屏幕滚动到图片当前位置加载图片,把图片的真实地址写到data-src属性里即可. <img src="占位图" data-src="img/foot.jpg&quo ...

  8. 利用简洁的图片预加载组件提升h5移动页面的用户体验

    在做h5移动页面,相信大家一定碰到过页面已经打开,但是里面的图片还未加载出来的情况,这种问题虽然不影响页面的功能,但是不利于用户体验.抛开网速的原因,解决这个问题有多方面的思路:最基本的,要从http ...

  9. html5 app图片预加载

    function Laimgload(){} //图片预加载JS Laimgload.prototype.winHeight = function(){ //计算页面高度 var winHeight ...

随机推荐

  1. MyEclipse中Source not found的问题

    1.问题描述 在MyEclipse中想查看源码,结果显示:Source not found ......(大概的意思就是找不到源码包) 2.解决方案 下载相应版本的apache-tomcat-8.5. ...

  2. KVM创建虚拟机

    一.复制现有img备份 1.ssh登陆宿主机 我的在 192.168.0.302.复制img 我的虚拟机img文件在 /home/images 我的img模板文件在 /home/tools/kvm/i ...

  3. 使用html+css+js实现3D相册

    使用html+css+js实现3D相册,快来上传的照片吧 效果图: 代码如下,复制即可用: <!DOCTYPE html> <html lang="en"> ...

  4. Linux基础入门学习笔记之四

    环境变量与文件查找 环境变量 变量 所谓shell变量,就是计算机中用于记录一个值(不一定是数值,也可以是字符或字符串)的符号,而这些符号将用于不同的运算处理中.通常变量与值是一对一的关系,可以通过表 ...

  5. python连接hbase

    安装HBase HBase是一个构建在HDFS上的分布式列存储系统,主要用于海量结构化数据存储.这里,我们的目标只是为Python访问HBase提供一个基本的环境,故直接下载二进制包,采用单机安装.下 ...

  6. 【LOJ】#2057. 「TJOI / HEOI2016」游戏

    题解 我并不会做,我觉得很像网络流但是毫无建图思路 我猜了个贪心,写了一下--啥过了90分?!这数据是有多水啊.. 哦又是行列拆点 不过要按照'#'进行拆点,也就是一段横着的区间只能放一个炸弹,一段竖 ...

  7. loadrunner 的Administration Page里面设置

    loadrunner 的Administration Page里面设置   1.Set LOGIN form's action tag to an error page.在登录的时候,传递一个动态变量 ...

  8. ref:CodeIgniter框架内核设计缺陷可能导致任意代码执行

    ref:https://www.seebug.org/vuldb/ssvid-96217 简要描述: 为准备乌云深圳沙龙,准备几个0day做案例. 官方承认这个问题,说明会发布补丁,但不愿承认这是个『 ...

  9. ZOJ 4010 Neighboring Characters（ZOJ Monthly, March 2018 Problem G，字符串匹配）

    题目链接  ZOJ Monthly, March 2018 Problem G 题意  给定一个字符串.现在求一个下标范围$[0, n - 1]$的$01$序列$f$.$f[x] = 1$表示存在一种 ...

  10. mongdb 拓展的下载地址和编译安装（php）

    下载地址:https://pecl.php.net/package/mongodb 编译安装: $ tar zxvf mongodb-mongodb-php-driver-<commit_id& ...