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. FolderSync Instant sync 即时同步

    Folderpairs - Edit folderpair - Sync options - Instant sync  Select this for instant sync on change. ...

  2. POJ 3041（最小点覆盖）

    题意: 假如你如今正处在一个N*N的矩阵中,这个矩阵里面有K个障碍物,你拥有一把武器,一发弹药一次能消灭一行或一列的障碍物,求最小的弹药消灭所有障碍物 输入为:     N K 接下来有K行,每行包括 ...

  3. 聊聊JVM的年轻代(转)

    聊聊JVM的年轻代 本文转自http://ifeve.com/jvm-yong-generation/ 1.为什么会有年轻代 我们先来屡屡,为什么需要把堆分代?不分代不能完成他所做的事情么?其实不分代 ...

  4. spring 上下文和spring mvc上下文和web应用上下文servletContext之间的关系

    要想很好理解这三个上下文的关系,需要先熟悉spring是怎样在web容器中启动起来的.spring的启动过程其实就是其IoC容器的启动过程,对于web程序,IoC容器启动过程即是建立上下文的过程. s ...

  5. Shell获取文件的文件名和扩展名的例子

    这篇文章主要介绍了Shell获取文件的文件名和扩展名的例子,简明版的代码实例,看了就懂,需要的朋友可以参考下 basename example.tar.gz .tar.gz # => examp ...

  6. Writable atomic property '***' cannot pair a synthesized setter/getter with a user defined

    1. warning: Semantic Issue: Writable atomic property 'number' cannot pair a synthesized setter/gette ...

  7. 如何优化JAVA代码

    通过使用一些辅助性工具来找到程序中的瓶颈,然后就可以对瓶颈部分的代码进行优化.一般有两种方案:即优化代码或更改设计方法.我们一般会选择后者,因为不去调用以下代码要比调用一些优化的代码更能提高程序的性能 ...

  8. Oracle中Instr用法

    在项目中用到了Oracle中 Instr 这个函数,顺便仔细的再次学习了一下这个知识. Oracle中,可以使用 Instr 函数对某个字符串进行判断,判断其是否含有指定的字符. 其语法为:Instr ...

  9. ubuntu MySQL安装和设置

    1. apt-get install mysql-server 2. apt-get isntall mysql-client 修改 /etc/mysql/my.cnf #bind-address   ...

  10. jquery json实现二级动态联动

    以下为代码!需要导入json架包 function getCity1(){ var unitid = document.getElementById('addformunitid').value; $ ...