JS图片预加载插件

      在开发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);

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏ThoughtWorks

JavaScript是如何处理事件?

#思特沃克好声音# (图片:网络) 想必大家都知道JavaScript一般都是在浏览器中执行,大家也知道可以通过事件调用JavaScript函数,可是大家清楚J...

29560
来自专栏琦小虾的Binary

HTML 表单 (form) 的作用解释

参考网址: 《HTML中form表单作用解释》 表单在网页中主要负责的是数据采集功能,一个表单基本由三部分组成: 表单标签:这里面包含了处理表...

42670
来自专栏Youngxj

EMLOG自适应emMsg提示信息

23080
来自专栏JadePeng的技术博客

Angular快速学习笔记(2) -- 架构

18520
来自专栏繁花云

liunx下利用某软件创建图形伪界面

Liunx下的dialog是一个可以创建对话框的工具,每个对话框提供的输出有两种形式:1、将所有输出到stderr,不显示到屏幕;2、使用退出状态码,OK为0...

11400
来自专栏十月梦想

node项目中文乱码解决

上一篇的第一个node项目成功运行,但是设置res.write('你好,世界'),浏览器运行出现乱码

9530
来自专栏我的博客

安卓开发之事件

事件处理:提供为用户动作响应的机制 Android提供两种方式的事件处理 一、基于回调的事件处理 二、基于监听的事件处理 事件监听处理模型中三类对象: 事件源:...

23950
来自专栏Google Dart

AngularDart4.0 指南-体系结构概述 顶

AngularDart(我们通常在这个文档中简单地称为Angular)是一个框架,用于在HTML和Dart中构建客户端应用程序。它是作为Angular包发布的,...

9330
来自专栏破晓之歌

Vue+element图片上传 原

采用比较笨的js解决方法,将bolb文件打开,读取src属性(这是一个base64的数据流),把src的内容一起发送给后端。

32930
来自专栏编程坑太多

「小程序JAVA实战」 小程序默认加载的页面和生命周期(八)

11920

扫码关注云+社区

领取腾讯云代金券