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. ORA-06502: PL/SQL: 数字或值错误 : 字符串缓冲区太小解决办法

    1.今天写的存储过程在执行过程中,报如下错误. exec PRO_T_008pro_update_add_delete(17,1,1,1,1,45.0,54.0,45.0,45.0,45.0,54.0 ...

  2. DotNet_Performance_Tuning_ANTS_Performance_Profiler

    http://www.cnblogs.com/parry/archive/2013/01/04/DotNet_Performance_Tuning_ANTS_Performance_Profiler. ...

  3. 实现观察者模式(Observer Pattern)的2种方式

    在观察者模式中有2个要素:一个是被观察对象,另一个是观察者.但被观察对象的状态发生改变会通知观察者. 举例:把订阅报纸的人看作是观察者,把报纸看作被观察对象.每当有新的新闻就要通知订阅报纸的人.本篇分 ...

  4. wcf配置参数说明

    Open/Close/Receive/Send本是HTTP/TCP/SOCKET的概念,Read/Write Operation则是Web Service的概念. 1.OpenTimeout 客户端与 ...

  5. Additive属性动画

    Additive属性动画 参考 http://ronnqvi.st/multiple-animations/ 效果 源码 https://github.com/YouXianMing/Animatio ...

  6. Easing圆环动画

    Easing圆环动画 效果 源码 https://github.com/YouXianMing/Animations // // CircleView.h // YXMWeather // // Cr ...

  7. 通过修改基表(link$)让非public dblink变为public

    有些朋友创建了一个非public的dblink,现在该数据库的其他用户需要去使用该dblink,在正常情况下无访问权限,需要重新建一个dblink,或者将原dblink修改为public.但是由于忘记 ...

  8. [Android Pro] Android中IntentService的原理及使用

    转载自:http://blog.csdn.net/ryantang03/article/details/8146154 在Android开发中,我 们或许会碰到这么一种业务需求,一项任务分成几个子任务 ...

  9. C语言：用二进制方式向文件读写一组数据(fread、fwrite)

    #include<stdio.h> #define SIZE 10 struct student { char name[10]; int num; int age; char addr[ ...

  10. C语言编译器不检查数组下标越界

    这两天被人问了一个问题说假如C/C++访问下表越界的数组元素会报错么,于是充满好奇心的我动手试了一下,WTF,果然没有报错,但是会给程序带来莫名其妙的结果(比如十次的循环但是变成了死循环,但八次却可以 ...