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

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

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. Lucene工作原理

    Lucene是一个高性能的java全文检索工具包,它使用的是倒排文件索引结构.该结构及相应的生成算法如下: 0)设有两篇文章1和2 文章1的内容为:Tom lives in Guangzhou,I l ...

  2. 纯JS单页面赛车游戏代码分享

    分享一个以前写的小游戏,纯js游戏,代码很简单.欢迎大家来喷呦! 效果图: 代码展示://直接复制到html文件即可 支持IE9+版本 <!DOCTYPE html> <html&g ...

  3. ZJOI2017 day1滚粗记

    这几天去温州作为外省选手参加了$ZJOI day1$.打了几天的酱油,考试也滚粗了.. $day -2$ 中午从学校出发,坐飞机去温州.到了温州以后吃完晚饭就回宾馆.把一直想做的糖果公园做完了以后就堕 ...

  4. 直方图均衡化CImg实现

    这篇博客是关于试用CImg库来实现灰度图和彩色图的直方图均衡化操作.感觉效果还不错,除了彩色图在均衡化时会有一定的色彩失真. C++代码实现: // // hEqualization.hpp // 直 ...

  5. Spark机器学习之协同过滤算法

    Spark机器学习之协同过滤算法 一).协同过滤 1.1 概念 协同过滤是一种借助"集体计算"的途径.它利用大量已有的用户偏好来估计用户对其未接触过的物品的喜好程度.其内在思想是相 ...

  6. Lamp环境搭建Linux CentOS6.5编译安装mysql5.6

    经典web开发组合Lamp环境搭建之mysql安装详解 安装前准备 通过rpm命令检查centos上是否已经安装mysql,然后卸载已经存在的mysql版本 [root@localhost src]# ...

  7. hdu1520 Anniversary party 简单树形DP

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1520 思路:树形DP的入门题 定义dp[root][1]表示以root为根节点的子树,且root本身参 ...

  8. Git详细教程---多人协作开发

    Git可以完成两件事情: 1. 版本控制 2.多人协作开发 如今的项目,规模越来越大,功能越来越多,需要有一个团队进行开发. 如果有多个开发人员共同开发一个项目,如何进行协作的呢. Git提供了一个非 ...

  9. 使用cl编译C/C++

    每次写程序都是用VS下打开的,而且有智能提示,经常很容易看到自己哪里写错了,其实想联系自己写代码的能力,不应该要这些的,纯粹的不要智能提示 所以自己想用轻量级的编辑器写,然后就用了notepad++( ...

  10. vim 和grep 正则表达式相似和区别

    正则表达式由两种基本字符类型组成:原义(正常)文本字符和元字符.元字符使正则表达式具有处理能力.所谓元字符就是指那些在正则表达式中具有特殊意义的专用字符,可以用来规定其前导字符(即位于元字符前面的字符 ...