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. HTTP请求头和响应头

      这篇文章简单总结一下HTTP请求头和响应头,并举一些web开发中响应头的用例. 1. HTTP请求头 accept:浏览器通过这个头告诉服务器,它所支持的数据类型.如:text/html, ima ...

  2. MultCloud – 支持数据互传的网盘管理

    MultCloud https://www.multcloud.com/ 是一款在线服务,可以在一个地方管理众多网盘,支持国产百度盘, 最具有特色的地方是你可以直接在 MultCloud 里操作将 D ...

  3. Linux新内核：提升系统性能 --Linux运维的博客

    http://blog.csdn.net/linuxnews/article/details/52864182

  4. TPL中限制进程数量

    The MaxDegreeOfParallelism sets the maximum number of simultaneous threads that will be used for the ...

  5. Sublime Text2安装emmet(原名Zen Coding)总结

    首先,安装好Sublime( 我用的是版本号2),之后注冊好.Sublime Text2.0.2注冊码:http://xionggang163.blog.163.com/blog/static/376 ...

  6. 图片碎片化mask动画

    图片碎片化mask动画 效果 源码 https://github.com/YouXianMing/Animations // // TransformFadeViewController.m // A ...

  7. git打pach包

    在开发中,我们发出的基线版本号常常会有一些bug须要修复,假设採用本地上库,然后再给用户新的版本号,可能会费时费力,而假设给用户我们改动后的代码让用户一行一行合入本地,也显的比較落后,假设用户那边也使 ...

  8. C++常用排序法、随机数

    C++常用排序法研究 2008-12-25 14:38 首先介绍一个计算时间差的函数,它在<time.h>头文件中定义,于是我们只需这样定义2个变量,再相减就可以计算时间差了. 函数开头加 ...

  9. 【六】注入框架RoboGuice使用:(Singletons And ContextSingletons)

    上一篇我们简单的介绍了一下RoboGuice的使用([五]注入框架RoboGuice使用:(Your First POJO Injection)),今天我们来看下单例以及上下文单例(ContextSi ...

  10. google protocol buffer的原理和使用（二）

    本文主要会介绍怎么使用Google Protocol的Lib来序列化我们的数据,方法非常多种,本文仅仅介绍当中的三种.其它的方法读者能够通过自行研究摸索.但总的来说,序列化数据总的来说分为下面俩步: ...