在开发H5项目中有时候会遇到要加载大量图片的情况，利用预加载技术可以提高用户浏览时的体验。

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="~/Scripts/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>

插件：

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

JS图片预加载插件的更多相关文章

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

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

  2. JQ封装图片预加载插件

    我们知道,图片的加载,特别是资源较大的图片,加载相当耗费时间.为了提高用户体验,不得不使用图片预加载技术来提前加载,以提高用户在浏览时的流畅度. 先来弄明白图片的懒加载和预加载的不同: 1)概念:懒加 ...

  3. js图片预加载

    图片预加载有大体有几种方式 1.html标签或css加载图片. 显而易见我们使用img标签或者通过标签的background-image属性都可以实现图片的预加载.但是为了避免初次载入过多图片影响体验 ...

  4. js图片预加载与延迟加载

    图片预加载的机制原理:就是提前加载出图片来,给前端的服务器有一定的压力. 图片延迟加载的原理:为了缓解前端服务器的压力,延缓加载图片,符合条件的时候再加载图片,当然不符合的条件就不加载图片.​ 预加载 ...

  5. js图片预加载后触发操作

    为了使得图片加载完,再触发回调函数,需进行图片预加载处理 function loadImage(url, callback) { var img = new Image(); img.src = ur ...

  6. js图片预加载以及延迟加载

    当我们需要做图片轮播的时候,如果让图片提前下载到本地,用浏览器缓存起来,我们可以用Image对象: function preLoadImg(){ var img=new Image(); img.sr ...

  7. js图片预加载、有序加载

    <!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8&qu ...

  8. js图片预加载实现！

    var myImage = (function(){ var imgNode = document.createElement( 'img' ); document.body.appendChild( ...

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

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

随机推荐

  1. BZOJ3720 Gty的妹子树 【树分块】

    题目 我曾在弦歌之中听过你, 檀板声碎,半出折子戏. 舞榭歌台被风吹去, 岁月深处尚有余音一缕-- Gty神(xian)犇(chong)从来不缺妹子-- 他来到了一棵妹子树下,发现每个妹子有一个美丽度 ...

  2. 超简单(super)

    超简单(super) 题目描述 有一个n面的骰子,第i面的数是vi,朝上的概率是pi. 教室的最后一排有一个人,不停地抛这个骰子,直到某一面朝上了两次,就停止抛骰子,但他不知道所有朝上的面的数字的和的 ...

  3. tomcat 启动慢解决(/dev/random)

    JRE默认使用 /dev/random作为随机数来源,当熵池大小不够的时候,random会很慢,造成随机数生成调用阻塞. 解决方案: 改用 /dev/urandom (1) tomcat的启动选项增加 ...

  4. js本地对象的操作

    1 String对象方法: concat 将两个或多个字符的文本组合起来,返回一个新的字符串. var a = "hello"; var b = ",world" ...

  5. [AGC008F] Black Radius（树形dp）

    神题啊!! Description 给你一棵有N个节点的树,节点编号为1到N,所有边的长度都为1 "全"对某些节点情有独钟,这些他喜欢的节点的信息会以一个长度为N的字符串s的形式给 ...

  6. 洛谷 [P2051] 中国象棋

    DP orz__stdcall 首先要想出来,每行最多只能放两个棋子,这是显然的 于是决策就是一行一行地处理 30分的做法就是裸的枚举,暴搜,枚举这一行放哪里,放几个 然后想到了压位dp,按3进制表示 ...

  7. Java抽象类，接口，抽象方法

    创建Animal抽象类 public abstract class Animal { public abstract void eat(); public abstract void sleep(); ...

  8. 获取所有querystring变量名

    原文发布时间为:2009-12-04 -- 来源于本人的百度文章 [由搬家工具导入] protected void Page_Load(object sender, EventArgs e)    { ...

  9. [LeetCode] Sudoku Solver 解数独,递归,回溯

    Write a program to solve a Sudoku puzzle by filling the empty cells. Empty cells are indicated by th ...

  10. poj 2699 The Maximum Number of Strong Kings 枚举 最大流

    题目链接 题意 对于一个竞赛图(有向完全图),其顶点是选手,边是比赛,边\(e=(u,v)\)代表该场比赛中\(u\)战胜\(v\). 现定义选手的分数为其战胜的人的个数(即竞赛图中点的出度).并且定 ...