1.preLoad.js插件

 /*!

  * preLoad.js v1.0

  * (c) 2017 Meng Fangui

  * Released under the MIT License.

  */

 (function ($) {

     function preLoad(imgs, options) {

         //传入imgs参数是图片 还是 数组

         this.imgs = (typeof imgs === 'string') ? [imgs] : imgs;

         //处理传入参数

         this.opts = $.extend({}, preLoad.DEFAULTS, options);

         //有序加载

         if(this.opts.order === 'ordered'){

             this._ordered();

         }else{

             //无序加载

             this._unordered();

         }

     }

     preLoad.DEFAULTS = {

         order:'unordered',//默认值：无顺预加载

         each: null,  // 每一张图片加载完毕后执行

         all: null,   // 所有图片加载完后执行

     }

     preLoad.prototype._ordered = function(){

         var opts = this.opts,

         imgs = this.imgs,

         len = imgs.length,

         count = 0;

         load();

         //有序预加载

         function load(){

             //实例化Image对象

             var imgObj = new Image();

             //监听load和error事件

             $(imgObj).on('load error',function(){

                 //每加载一张图片触发的事件

                 opts.each && opts.each(count);

                 if (count >= len) {

                     //所有的图片已经加载完 触发的事件

                     opts.all && opts.all();

                 } else{

                     load();

                 }

                 count++;

             });

             //图片路径赋值

             imgObj.src = imgs[count];

         }

     };

     preLoad.prototype._unordered = function () {

         //无序加载

         var imgs = this.imgs,

             opts = this.opts,

             count = 0,

             len = imgs.length;

         $.each(imgs, function (i, src) {

             //判断图片路径是否是字符串

             if (typeof src != 'string') {

                 return;

             }

             //实例化Image对象

             var imgObj = new Image();

             //监听load和error事件

             $(imgObj).on('load error', function () {

                 //每加载一张图片触发的事件

                 opts.each && opts.each(count);

                 if (count >= len - 1) {

                     //所有的图片已经加载完 触发的事件

                     opts.all && opts.all();

                 }

                 count++;

             });

             //给图片赋值路径

             imgObj.src = src;

         });

     };

     $.extend({

         preload: function (imgs, opts) {

             new preLoad(imgs, opts);

         }

     });

 })(jQuery);

2、实例

2.1 html代码：

 <!DOCTYPE html>

 <html lang="zh-CN">

     <head>

         <meta charset="UTF-8">

         <title>图片预加载之无序加载</title>

         <link rel="stylesheet" type="text/css" href="css/main.css"/>

     </head>

     <body>

         <div class="container">

             <img src="http://image5.tuku.cn/wallpaper/Landscape%20Wallpapers/8294_2560x1600.jpg" alt="pic" id="img">

             <p>

                 <a  href="javascript:" class="btn" data-control="prev">上一页</a>

                 <a  href="javascript:" class="btn" data-control="next">下一页</a>

             </p>

         </div>

         <div class="loading">

             <p class="progress">0%</p>

         </div>

         <script src="js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>

         <script src="js/preload.js" type="text/javascript" charset="utf-8"></script>

         <script src="js/main.js"></script>

     </body>

 </html>

2.2css代码（main.css）

 body{

     margin: 0;

     padding: 0;

     width: 100%;

     height: 100%;

 }

 .container{

     margin: 100px 0;

     text-align: center;

 }

 a{

     text-decoration: none;

 }

 .btn{

     display: inline-block;

     line-height: 30px;

     height: 30px;

     outline: 0;

     background-color: #eee;

     color: #333;

     padding: 5px 10px;

 }

 img{

     width: 640px;

 }

 .btn:hover{

     background-color: #ddd;

 }

 .loading{

     position: fixed;

     top: 0;

     left: 0;

     width: 100%;

     height: 100%;

     background-color: #eee;

     text-align: center;

     font-size: 30px;

 }

 .progress{

     margin-top:300px;

 }

2.3js（main.js）

 $(function() {

     var imgs = [

         'http://image5.tuku.cn/wallpaper/Landscape%20Wallpapers/8294_2560x1600.jpg',

         'http://www.deskcar.com/desktop/fengjing/2011722123730/1.jpg',

         'http://www.33lc.com/article/UploadPic/2012-8/20128181071010672.jpg',

         'http://www.bbra.cn/Uploadfiles/imgs/2016/11/02/tu2/001.jpg',

         'http://www.ctskyril.com/Public/article/2015-05-29/556812ea53938_thumb.jpg',

         'http://www.doudouxitong.net/uploads/allimg/151221/1-15122114433V39.jpg',

         'http://d.5857.com/zirfengg_141208/001.jpg',

         'http://pic1.win4000.com/wallpaper/4/53fee27a01094.jpg',

         'http://pic1.win4000.com/wallpaper/1/56821f8bb1e23.jpg'

     ];

     var index = 0,

         len = imgs.length,

         $progress = $('.progress');

     $.preload(imgs, {

         each: function(count) {

             $progress.html(Math.round((count + 1) / len * 100) + '%');

         },

         all: function() {

             $('.loading').hide();

             document.title = '1/' + len;

         }

     });

     $('.btn').on('click', function() {

         if($(this).data('control') === 'prev') {

             //     上一张

             index = Math.max(0, --index);

         } else {

             //    下一张

             index = Math.min(len - 1, ++index);

         }

         document.title = (index + 1) + '/' + len;

         $('#img').attr('src', imgs[index]);

     });

 });

3、运行上述代码时，需要注意文件路径

3.1 图片加载前

3.2图片加载后

图片预加载插件 preLoad.js的更多相关文章

  1. JQ封装图片预加载插件

    我们知道,图片的加载,特别是资源较大的图片,加载相当耗费时间.为了提高用户体验,不得不使用图片预加载技术来提前加载,以提高用户在浏览时的流畅度. 先来弄明白图片的懒加载和预加载的不同: 1)概念:懒加 ...

  2. JS图片预加载插件

    在开发H5项目中有时候会遇到要加载大量图片的情况,利用预加载技术可以提高用户浏览时的体验. 1)概念:懒加载也叫延迟加载:JS图片延迟加载,延迟加载图片或符合某些条件时才加载某些图片.预加载:提前加载 ...

  3. 图片懒加载插件lazyload.js详解

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  4. 图片懒加载插件echo.js——改造

    今天做一个列表项需要用到懒加载,搜到网友推荐的echo.js,试用了一下,还不错.除了懒加载,还提供了throttle——节流,即用户快速滑动列表时,很快滑过的项的图片不会加载,只会加载最后停下来的位 ...

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

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

  6. 图片预加载 js css预加载

    图片预加载, 效果非常明显, 特别是有多个图, 方法很简单 , 体验提升了不少 <div class="hidden">        <script type= ...

  7. Js 之图片懒加载插件

    一.PC端(lazyload) 1.引入js文件 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.m ...

  8. Javascript图片预加载详解

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

  9. 利用CSS、JavaScript及Ajax实现图片预加载的三大方法

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

随机推荐

  1. 【scrapy】使用方法概要（一）(转)

    [请初学者作为参考,不建议高手看这个浪费时间] 工作中经常会有这种需求,需要抓取互联网上的数据.笔者就经常遇到这种需求,一般情况下会临时写个抓取程序,但是每次遇到这种需求的时候,都几乎要重头写,特别是 ...

  2. 深入浅出－网络七层模型&&网络数据包

    网络基本概念 OSI模型 OSI 模型(Open System Interconnection model)是一个由国际标准化组织

  3. Canavs arcTo方法的理解

    arcTo方法有四个參数 參数1,2为第一个控制点的x,y坐标,參数2为第二个控制点的坐标,參数3为绘制圆弧的半径. 起点和第一个控制点组成的延长线与第一个控制点和第二个控制点组成的延长线都是和圆弧相 ...

  4. .Net C#上传文件最大设置

    <!--网页允许的最大设置节点--> <system.web> <httpRuntime targetFramework="4.5" maxReque ...

  5. 关于TFS2010 远程无法创建团队项目的若干问题总结

    今天遇到一个TFS的问题,折腾了好几个小时,故将其记录,给有遇到类似问题的朋友一些参考. 1.本文前提:服务器端只安装了TFS2010,本地没有安装Visual Studio 2010,因此不能在服务 ...

  6. Android支付接入（7）：Google In-app-Billing

    今天跟大家一起看下Google的in-app Billing V3支付.    如果没有GooglePlay此处附上安装Google Play的一键安装器的链接(需要Root权限):http://ww ...

  7. PHP 7.0 5.6 下安裝 phpLDAPadmin 发生错误的修正方法

    在稍具規模的網路環境中, 網管時常選用 LDAP 來進行帳號的統整管理, 一方面提供管理便利度, 另一方面使用者也不必因為不同系統而記憶不同帳號, phpLDAPadmin 是一套常見的 LDAP 管 ...

  8. VC++ 改动VMware BIOS、uuid_location、ethernet0_address等

    VC++ 改动VMware BIOS.uuid_location.ethernet0_address等.主要问题例如以下 (1)随机产生16进制数. (2)改动vmx相应项.依据规则一般仅仅改动最后三 ...

  9. 3D几何图形生成的DEMO

    3D几何图形生成的DEMO 可以生成以下几种图形: [1] 平面(Plane)图形的生成算法 [2] 立方体(Box)图形的生成算法 [3] 球(Sphere)图形的生成算法 [4] 圆锥(Cone) ...

  10. strtok()函数

    strtok()这个函数大家都应该碰到过,但好像总有些问题, 这里着重讲下它 首先看下MSDN上的解释: char *strtok( char *strToken, const char *strDe ...