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

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

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

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

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

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

整个框架代码：

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>preload</title>
  6.      <style>
  7.          *{margin:0;pading:0;}
  8.          a{
  9.              text-decoration: none;
  10.          }
  11.          .box {text-align:center;}
  12.          .btn{
  13.              display:inline-block;
  14.              height:30px;
  15.              line-height:30px;
  16.              border:1px solid #ccc;
  17.              background: #fff;
  18.              padding:0 10px;
  19.              margin-right:50px;
  20.              color: #333;
  21.          }
  22.          .btn:hover{
  23.              background: #eee;
  24.          }
  25.          /*进度条样式*/
  26.          .loading{
  27.              position:fixed;
  28.              top:0;
  29.              left:0;
  30.              bottom:0;
  31.              right:0;//撑满整个屏幕
  32.              background: #eee;
  33.              text-align: center;
  34.              font-size:30px;
  35.              font-weight:bold;
  36.          }
  37.          .progress{
  38.              margin-top:300px;
  39.          }
  40.      </style>
  41.  </head>
  42.  <body>
  43.  <!--无序预加载需要写进度条，当加载完毕后才能操作；
  44.      有序预加载可以不写进度条，加载完第一张后立即加载第二张、第三张、第四张...
  45.  -->
  46.      <div class="box">
  47.          <img src="http://image.hnol.net/c/2010-11/14/21/201011142147143181-239867.jpg" id="img" alt="pic" width="1000">
  48.          <p>
  49.              <a href="javascript:;" class="btn" data-control="prev">上一张</a>
  50.              <a href="javascript:;" class="btn" data-control="next">下一张</a>
  51.          </p>
  52.      </div>
  53.      <!--进度条-->
  54.      <div class="loading">
  55.          <p class="progress">0%</p>
  56.      </div>
  57.      <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
  58.      <script src="js/preload.js"></script>
  59.      <script>
  60.          var imgs = ['http://image.hnol.net/c/2010-11/14/21/201011142147143181-239867.jpg',
  61.              'http://www.picperweek.com/resource/image/dbc3c16b-5fc6-48e5-aa48-c64739739da2.png',
  62.              'http://imgstore.cdn.sogou.com/app/a/100540002/406526.jpg'],
  63.              index = 0,
  64.              len = imgs.length;
  65.              $progress = $('.progress');
  66.                //有序预加载,可以不用写进度条部分，如果有写，需要手动配置each()、all()方法
  67.  //            $.preload(imgs,{
  68.  //                order:'ordered'
  69.  //            });
  70.  
  71.          //调用无序预加载   --imgs 数组存放预加载的图片
  72.          $.preload(imgs,{
  73.              //每张图片加载(load事件)一次触发一次each()
  74.              each:function (count) {
  75.                  //进度条显示百分比进度
  76.                  $progress.html(Math.round((count + 1) / len * 100) + '%');
  77.              },
  78.              //加载完毕
  79.              all: function () {
  80.                  $('.loading').hide();
  81.                  document.title = '1/' + len;//初始化第一张
  82.              }
  83.          });
  84.          //未封装成插件的无序预加载
  85.  //        $.each(imgs,function(i,src){
     //            var imgObj = new Image();   //Image()实例用于缓存图片
  86.  //
  87.  //            $(imgObj).on('load error',function(){
  88.  //                $progress.html(Math.round((count + 1) / len * 100) + '%');
  89.  //
  90.  //                if(count >= len - 1){
  91.  //                    $('.loading').hide();
  92.  //                    document.title = '1/' + len;
  93.  //                }
  94.  //                count++;//每加载完一张图片count加1
  95.  //            });
  96.  //
  97.  //            imgObj.src = src;//缓存图片
  98.  //        });
  99.          //上一页，下一页按钮
  100.          $('.btn').on('click',function(){
  101.              if('prev' === $(this).data('control')){
  102.                  index = Math.max(0,--index);
  103.              }else{
  104.                  index = Math.min(len - 1,++index);
  105.              }
  106.              document.title = (index + 1)+'/' + len;
  107.              $('img').attr('src',imgs[index]);
  108.          });
  109.      </script>
  110.  </body>
  111.  </html>

JQ插件部分：(preload.js)

  1.  ;(function($){
  2.  
  3.      function PreLoad(imgs, options){
  4.          //保存图片到数组
  5.          this.imgs = (typeof imgs === 'string') ? [imgs] : imgs;
  6.          this.opts = $.extend(PreLoad.defaults,options);
  7.  
  8.          // this._unordered();//如果只有无序预加载
  9.          if(this.opts.order === 'ordered'){
  10.              this._ordered();
  11.          }else{
  12.              this._unordered();//默认是无序预加载
  13.          }
  14.      };
  15.      PreLoad.defaults = {
  16.          order: 'unordered', //指定默认加载方式为无序
  17.          each: null, //每一张图片加载完毕后执行
  18.          all: null //所有图片加载完毕后执行
  19.      };
  20.      //有序预加载
  21.      PreLoad.prototype._ordered = function(){
  22.          var opts = this.opts,
  23.              imgs = this.imgs,
  24.              len = imgs.length,
  25.              count = 0;
  26.  
  27.          load();
  28.          function load(){
  29.              var imgObj = new Image();
  30.  
  31.              $(imgObj).on('load error', function () {
  32.                  //相当于if(opts.each){ opts.each(); } ，如果有配置each()方法则调用，后面的all()同理
  33.                  opts.each && opts.each(count);
  34.  
  35.                  if(count >= len){
  36.                      //所有图片加载完毕
  37.                      opts.all && opts.all();
  38.                  }else{
  39.                      //如果没加载完，继续调用自身加载下一张
  40.                      load();
  41.                  }
  42.                  count++;
  43.              });
  44.  
  45.              imgObj.src = imgs[count];//缓存图片
  46.          };
  47.      };
  48.  
  49.      //无序加载
  50.      PreLoad.prototype._unordered = function(){
  51.          var imgs = this.imgs,
  52.              opts = this.opts,
  53.              count = 0,
  54.              len = imgs.length;
  55.  
  56.          $.each(imgs,function(i,src){
  57.              //判断图片数组中的每一项是否为字符串，不是字符串会导致出错，因此返回
  58.              if(typeof src != 'string') return;
  59.  
  60.              var imgObj = new Image();
  61.  
  62.              $(imgObj).on('load error',function(){
  63.                  //判断opts.each是否存在，不存在则不执行
  64.                  opts.each && opts.each(count);
  65.  
  66.                  if(count >= len - 1){
  67.                      //判断opts.all是否存在，存在则执行
  68.                      opts.all && opts.all();
  69.                  }
  70.                  count++;
  71.              });
  72.  
  73.              imgObj.src = src;//缓存图片
  74.          });
  75.      };
  76.  
  77.      //由于不用具体的对象去调用，因此用$.extend(object)挂载插件.
  78.      $.extend({
  79.          //preload为插件名
  80.         preload: function(imgs,opts) {
  81.             new PreLoad(imgs,opts);
  82.         }
  83.      });
  84.  
  85.  })(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. 一款Modbus设备调试工具Winform（包括SRC0001、海康威视、TTS以及各种类型LED的测试）

    1.SRC寄存器读写测试 2.采集数据终端模块(这里是康海时代)调试 3.RS485传感器设备调试 4.LED/TTS/海康威视等展示设备调试 5.Modbus等协议规约资料及4-20mA设备调试 以 ...

  2. lxml简明教程

    最近要做下微信爬虫,之前写个小东西都是直接用正则提取数据就算了,如果需要更稳定的提取数据,还是使用 xpath 定位元素比较可靠.周末没事,从爬虫的角度研究了一下 python xml 相关的库. P ...

  3. 蓝桥杯-逆波兰表达式-java

    /* (程序头部注释开始) * 程序的版权和版本声明部分 * Copyright (c) 2016, 广州科技贸易职业学院信息工程系学生 * All rights reserved. * 文件名称: ...

  4. webService 下得 拦截

    当我们 对webservice 接口的 拦截 更具权限  来 判断 是否可以调用  一下是我的 一个demo 首先 我们写一个 拦截类 import javax.xml.soap.SOAPExcept ...

  5. SectionIndexer 利用系统的控件，制作比较美观的侧栏索引控件

    如上图所示,右侧的索引是系统提供的,具体使用方法,请搜索: SectionIndexer 相关的资料进行开发.

  6. springmvc 方法参数自定义的解析

    1.实现HandlerMethodArgumentResolver接口: 2.在配置文件中添加配置<mvc:argument-resolvers>   <bean class=&qu ...

  7. python基本语法-加密解密等

    1. 编写函数,要求输入x与y,返回x和y的平方差 2. 计算1到100的平方的和 3. 编写函数,若输入为小于100的数,返回TRUE,大于100的数,返回FALSE 4. 某个公司采用公用电话传递 ...

  8. __builtin_popcount(n)

    Gcc提供的内建函数__builtin_popcount(n),可以精确计算n表示成二进制时有多少个1.借助这个函数可以快速判断一个数是否是2的幂. bool isPowerOfTwo(int n) ...

  9. HDU4704Sum 费马小定理+大数取模

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=4704 题目大意: 看似复杂,其实就是求整数n的划分数,4=1+1+2和4=1+2+1是不同的.因而可 ...

  10. 关于SVN工具的配置及使用

    一.在Ubuntu下的配置 1.检测svn是否已经安装过 使用命rpm -qa | grep subversion,如果是一下结果,说明系统已经安装过svn了 如果什么都没有输出,则说明没有安装过sv ...