我们知道，图片的加载，特别是资源较大的图片，加载相当耗费时间。为了提高用户体验，不得不使用图片预加载技术来提前加载，以提高用户在浏览时的流畅度。

先来弄明白图片的懒加载和预加载的不同：

1)概念：
懒加载也叫延迟加载：JS图片延迟加载,延迟加载图片或符合某些条件时才加载某些图片。
预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染。

2)区别：
两种技术的本质：两者的行为是相反的，一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。

服务器端区别：懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数。预加载可以说是牺牲服务器前端性能，换取更好的用户体验，这样可以使用户的操作得到最快的反映。

下面来封装一个预加载插件，同时讲解它的用法：

整个框架代码：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>preload</title>

     <style>

         *{margin:0;pading:0;}

         a{

             text-decoration: none;

         }

         .box {text-align:center;}

         .btn{

             display:inline-block;

             height:30px;

             line-height:30px;

             border:1px solid #ccc;

             background: #fff;

             padding:0 10px;

             margin-right:50px;

             color: #333;

         }

         .btn:hover{

             background: #eee;

         }

         /*进度条样式*/

         .loading{

             position:fixed;

             top:0;

             left:0;

             bottom:0;

             right:0;//撑满整个屏幕

             background: #eee;

             text-align: center;

             font-size:30px;

             font-weight:bold;

         }

         .progress{

             margin-top:300px;

         }

     </style>

 </head>

 <body>

 <!--无序预加载需要写进度条，当加载完毕后才能操作；

     有序预加载可以不写进度条，加载完第一张后立即加载第二张、第三张、第四张...

 -->

     <div class="box">

         <img src="http://image.hnol.net/c/2010-11/14/21/201011142147143181-239867.jpg" id="img" alt="pic" width="1000">

         <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="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>

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

     <script>

         var imgs = ['http://image.hnol.net/c/2010-11/14/21/201011142147143181-239867.jpg',

             'http://www.picperweek.com/resource/image/dbc3c16b-5fc6-48e5-aa48-c64739739da2.png',

             'http://imgstore.cdn.sogou.com/app/a/100540002/406526.jpg'],

             index = 0,

             len = imgs.length;

             $progress = $('.progress');

               //有序预加载,可以不用写进度条部分，如果有写，需要手动配置each()、all()方法

 //            $.preload(imgs,{

 //                order:'ordered'

 //            });

         //调用无序预加载   --imgs 数组存放预加载的图片

         $.preload(imgs,{

             //每张图片加载(load事件)一次触发一次each()

             each:function (count) {

                 //进度条显示百分比进度

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

             },

             //加载完毕

             all: function () {

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

                 document.title = '1/' + len;//初始化第一张

             }

         });

         //未封装成插件的无序预加载

 //        $.each(imgs,function(i,src){
 //            var imgObj = new Image();   //Image()实例用于缓存图片

 //

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

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

 //

 //                if(count >= len - 1){

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

 //                    document.title = '1/' + len;

 //                }

 //                count++;//每加载完一张图片count加1

 //            });

 //

 //            imgObj.src = src;//缓存图片

 //        });

         //上一页，下一页按钮

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

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

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

             }else{

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

             }

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

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

         });

     </script>

 </body>

 </html>

JQ插件部分：(preload.js)

 ;(function($){

     function PreLoad(imgs, options){

         //保存图片到数组

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

         this.opts = $.extend(PreLoad.defaults,options);

         // this._unordered();//如果只有无序预加载

         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(){

             var imgObj = new Image();

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

                 //相当于if(opts.each){ opts.each(); } ，如果有配置each()方法则调用，后面的all()同理

                 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;

             var imgObj = new Image();

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

                 //判断opts.each是否存在，不存在则不执行

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

                 if(count >= len - 1){

                     //判断opts.all是否存在，存在则执行

                     opts.all && opts.all();

                 }

                 count++;

             });

             imgObj.src = src;//缓存图片

         });

     };

     //由于不用具体的对象去调用，因此用$.extend(object)挂载插件.

     $.extend({

         //preload为插件名

        preload: function(imgs,opts) {

            new PreLoad(imgs,opts);

        }

     });

 })(jQuery);

根据我们的需求来调用不同的插件，将未来可能用到的图片用Image()实例缓存起来。

JQ封装图片预加载插件的更多相关文章

  1. 图片预加载插件 preLoad.js

    1.preLoad.js插件 /*! * preLoad.js v1.0 * (c) 2017 Meng Fangui * Released under the MIT License. */ (fu ...

  2. JS图片预加载插件

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

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

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

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

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

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

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

  6. 用es6类封装的图片预加载技术!

    1.HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

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

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

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

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

  9. js 函数的多图片预加载(preload) 带插件版完整解析

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS实现图片预加载效果 本篇文章写的 ...

随机推荐

  1. PHP命名空间理解

    这玩意就是路径! 这玩意就是路径! 这玩意就是路径! 这玩意就是路径! 这玩意就是路径! use 就是声明要用某个路径的文件(类) 再有namespace的情况下,就类似于已经在一个路径里了 这个时候 ...

  2. 清北Day 2

    清北第二天,感受到了来自这个世界的不友善,大概把没听过不会的"名词"记录下来就已经一面了,然后被大佬说这都是最基础的东西,就很皮,那就趁别人练习字符串的题的时候,来写波博客了,倒不 ...

  3. JVM 方法调用之动态分派

    1. 动态分派 一个体现是重写(override).下面的代码,运行结果很明显. public class App { public static void main(String[] args) { ...

  4. python之爬虫学习记录与心得

    之前在寒假的时候,学习了python基础.在慕课网上看的python入门:http://www.imooc.com/learn/177 python进阶:http://www.imooc.com/le ...

  5. [周译见] C# 7 中的模范和实践

    原文地址:https://www.infoq.com/articles/Patterns-Practices-CSharp-7 关键点 遵循 .NET Framework 设计指南,时至今日,仍像十年 ...

  6. Hadoop 核心架构

    Hadoop 由许多元素构成.其最底部是 Hadoop Distributed File System(HDFS),它存储 Hadoop 集群中所有存储节点上的文件.HDFS(对于本文)的上一层是Ma ...

  7. Xmind 体验分享

    Xmind 8 体验 初识思维脑图 这两天在学习使用思维脑图(xmind是其中一款软件)ing,在体验了一把思维脑图的使用后,深深感受到了脑洞大开的魔力. 从昨晚开始研究使用,到今天晚上截止,自己试着 ...

  8. Unity C# 一些关于Camera的心得！

    本文原创,转载请注明出处:http://www.cnblogs.com/AdvancePikachu/p/6856374.html 首先,总结了下最近工作中关于摄像机漫游的功能, 脚本如下: Tran ...

  9. 策略模式（stragegy）

    策略模式(stragegy) 定义了算法族,分别封装起来,让它们之间可以相互替换,此模式让算法独立于使用算法的客户(Head First 设计模式).    策略模式,针对接口编程,而不依赖于具体的实 ...

  10. 利用有限自动机(finite automata)进行模式匹配

    一.有限自动机定义及基本术语: 一个有限自动机 M 是一个5元组(Q, ,A, Σ, δ),其中: Q 是所有状态的有限集合;  ∈ Q (属于)是初始状态; A ⊆ Q (子集)是接受状态的集合; ...