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. Windows 7安装超级终端连接COM口设备

    Windows 7已经没有超级终端,只能用投机取巧的方式实现. 1.先配置电话 随便填写信息,然后点击确定即可. 2.下载这个终端运行,注意:要以管理员身份运行. 链接: https://pan.ba ...

  2. WordPress 客户端软件列表

    Windows: BlogDesk BlogJet Blog Writer Chrysanth WebStory Deepest Sender (Firefox或SeaMonkey扩展,跨平台- De ...

  3. web服务器boa的移植

    1.下载官方网站 http://www.boa.org/ 我下载的是0.94.13版本 2.解压 tar -zxvf boa-0.94.13.tar.gz 3.进入src目录 ./configure ...

  4. 读 Zepto 源码系列

    虽然最近工作中没有怎么用 zepto ,但是据说 zepto 的源码比较简单,而且网上的资料也比较多,所以我就挑了 zepto 下手,希望能为以后阅读其他框架的源码打下基础吧. 源码版本 本文阅读的源 ...

  5. 【Android开发学习46】Android平台切割PNG图片成小png图片

    功能描写叙述: 分解 assets 文件夹文件下的 PNG 图片成 各个小尺寸 PNG 图片 . 主函数运行: // 创建文件夹, 用来保存分解出来的图片 createPath("/sdca ...

  6. Oracle中空值与数字相加问题

    select 10 + 10 + 10 from dual 结果是30,全然没问题. select null + 10 + 10 from dual 结果是空串,但期望的结果是20. select n ...

  7. C#中结构(struct)的部分初始化和完全初始化

    假设有这样一个值类型struct. public struct Size { public int Length; public int Width; public int Area() { retu ...

  8. jvm执行流程

    首先给一个简单的Java示例,源代码如下: public class Main { private static int size=1; public static void main(String  ...

  9. 解决hue/hiveserver2对于hive date类型显示为NULL的问题

    用户报在Hue中执行一条sql:select admission_date, discharge_date,birth_date from hm_004_20170309141149.inpatien ...

  10. Vmware esx/esxi Vlan三种配置模式（VST、EST和VGT）

    在Vmware esx/esxi中使用虚拟Lan(Vlan)时,一般是指Vlan Trunk的使用,使用的Vlan配置还有其它三种类型: Virtual Switch Tagging(虚拟交换机标记, ...