设计模式（节流模式-----图片懒加载）

Posted hsp大鹏

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了设计模式（节流模式-----图片懒加载）相关的知识，希望对你有一定的参考价值。

  昨天把节流模式写了下，今天来个节流模式的应用----图片懒加载（图片延迟加载）

  废话不多说，直接懒加载代码吧！哈哈

  

 1            //创建懒加载对象 @id是将要获取外部容器的id
               var Lazyload = function(id) {  
 2                 this.container = document.getElementById(id);
 3                 this.imgs = this.getImgs();
 4                 this.init();//初始化
 5             }
 6             Lazyload.prototype = {
 7                 //初始化
 8                 init: function() {
 9                     this.update(); //进行首次图片位置判断
10                     this.bindEvent(); //添加事件
11                 },
12                 //获取图片数据
13                 getImgs: function() { //获取到的图片对象放入数组中
14                     var arr = [];
15                     var imgs = this.container.getElementsByTagName(‘img‘);
16                     for(var i = 0, len = imgs.length; i < len; i++) {
17                         arr.push(imgs[i]);
18                     }
19                     return arr;
20                 },
21                 //对图片进行处理操作
22                 update: function() {
23                     if(!this.imgs.length) return;
24                     var i = this.imgs.length;
25                     for(i--; i >= 0; i--) {
26                         if(this.shouldShow(i)) {
27                             this.imgs[i].src = this.imgs[i].getAttribute("data-src");
28                             this.imgs.splice(i, 1);//获取后删除数组中的图片
29                         }
30                     }
31                 },
32                 //判断图片位置
33                 shouldShow: function(i) {
34                     var img = this.imgs[i];
35                     scrollTop = document.documentElement.scrollTop || document.body.scrollTop;//滚动高度
36                     scrollBottom = scrollTop + document.documentElement.clientHeight; //获取页面底部高度
37                     imgTop = this.pageY(img);
38                     imgBottom = imgTop + img.offsetHeight;
39                     if((imgTop > scrollTop && imgTop < scrollBottom) || (imgBottom > scrollTop && imgBottom < scrollBottom)) {
40 
41                         return true;
42                     } else {
43                         return false;
44                     }
45                 },
46                 //获取图片距离页面顶部距离
47                 pageY: function(ele) {
48                     if(ele.offsetParent) {
49                         return ele.offsetTop + this.pageY(ele.offsetParent);
50                     } else {
51                         return ele.offsetTop;
52                     }
53                 },
54                 //绑定事件
55                 bindEvent: function() {
56                     var that = this;
57                     that.on(window, "scroll", function() {
58                         //that.update();
59                         throttle(that.update, {
60                             context: that
61                         })
62                     });
63                     that.on(window, function() {
64                         //that.update();
65                         throttle(that.update, {
66                             context: that
67                         })
68                     })
69                 },
70                 //监听
71                 on: function(ele, type, fn) {
72                     if(ele.addEventListener) {
73                         ele.addEventListener(type, fn, false)
74                     } else {
75                         ele.attachEvent("on" + type, fn)
76                     }
77                 }
78             }

结果展示：

延迟前显示默认图片

技术分享

延迟结果

 技术分享

完整代码：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #con div {
                width: 300px;
                height: 200px;
                overflow: hidden;
                margin: auto;
            }
            
            img {
                width: 100%;
                height: 100%;
            }
        </style>
    </head>

    <body>
        <div id="con">
            <div><img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300×200&w=300&h=200" data-src="http://img5.imgtn.bdimg.com/it/u=2033765348,1346395611&fm=206&gp=0.jpg" /></div>
            <div><img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300×200&w=300&h=200" data-src="http://img.pconline.com.cn/images/upload/upc/tx/wallpaper/1209/10/c1/13758581_1347257278695.jpg" /></div>
            <div><img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300×200&w=300&h=200" data-src="http://img5.imgtn.bdimg.com/it/u=2033765348,1346395611&fm=206&gp=0.jpg" /></div>
            <div><img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300×200&w=300&h=200" data-src="http://img5.imgtn.bdimg.com/it/u=2033765348,1346395611&fm=206&gp=0.jpg" /></div>
            <div><img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300×200&w=300&h=200" data-src="http://pic32.nipic.com/20130814/13162234_111708002000_2.jpg" /></div>
            <div><img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300×200&w=300&h=200" data-src="http://img5.imgtn.bdimg.com/it/u=3704303780,566844591&fm=206&gp=0.jpg" /></div>
            <div><img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300×200&w=300&h=200" data-src="http://img5.imgtn.bdimg.com/it/u=2033765348,1346395611&fm=206&gp=0.jpg" /></div>
            <div><img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300×200&w=300&h=200" data-src="http://www.bz55.com/uploads/allimg/141202/139-141202103039.jpg" /></div>
            <div><img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300×200&w=300&h=200" data-src="http://img.pconline.com.cn/images/upload/upc/tx/wallpaper/1209/10/c1/13758581_1347257278695.jpg" /></div>
            <div><img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300×200&w=300&h=200" data-src="http://pic32.nipic.com/20130814/13162234_111708002000_2.jpg" /></div>
        </div>
        <div style="height: 500px;background: red;position: relative;padding:1px;display: block;">
            <div id="a" style="margin-top: 10px;background: yellow; height: 100px;"></div>
        </div>
        <script>
            var extend = function(olds, news) {
                for(var index in news) {
                    olds[index] = news[index];
                }
                return olds;
            }
            var throttle = function() {
                var isClear = arguments[0],
                    fn;
                if(typeof isClear === "boolean") {
                    fn = arguments[1];
                    fn.__throttleID && clearTimeout(fn.__throttleID);
                } else {
                    fn = isClear;
                    param = arguments[1] || [];
                    var p = extend({
                        context: null,
                        args: [],
                        time: 300
                    }, param);
                    arguments.callee(true, fn);
                    fn.__throttleID = setTimeout(function() {
                        fn.apply(p.context, p.args)
                    }, p.time)
                }
            }
            var Lazyload = function(id) {
                this.container = document.getElementById(id);
                this.imgs = this.getImgs();
                this.init();
            }
            Lazyload.prototype = {
                //初始化
                init: function() {
                    this.update(); //进行首次图片位置判断
                    this.bindEvent(); //添加事件
                },
                //获取图片数据
                getImgs: function() {
                    var arr = [];
                    var imgs = this.container.getElementsByTagName(‘img‘);
                    for(var i = 0, len = imgs.length; i < len; i++) {
                        arr.push(imgs[i]);
                    }
                    return arr;
                },
                //对图片进行处理操作
                update: function() {
                    if(!this.imgs.length) return;
                    var i = this.imgs.length;
                    for(i--; i >= 0; i--) {
                        if(this.shouldShow(i)) {
                            this.imgs[i].src = this.imgs[i].getAttribute("data-src");
                            this.imgs.splice(i, 1);
                        }
                    }
                },
                //判断图片位置
                shouldShow: function(i) {
                    var img = this.imgs[i];
                    scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                    scrollBottom = scrollTop + document.documentElement.clientHeight;
                    imgTop = this.pageY(img);
                    imgBottom = imgTop + img.offsetHeight;
                    if((imgTop > scrollTop && imgTop < scrollBottom) || (imgBottom > scrollTop && imgBottom < scrollBottom)) {

                        return true;
                    } else {
                        return false;
                    }
                },
                //获取图片距离页面顶部距离
                pageY: function(ele) {
                    if(ele.offsetParent) {
                        return ele.offsetTop + this.pageY(ele.offsetParent);
                    } else {
                        return ele.offsetTop;
                    }
                },
                //绑定事件
                bindEvent: function() {
                    var that = this;
                    that.on(window, "scroll", function() {
                        //that.update();
                        throttle(that.update, {
                            context: that
                        })
                    });
                    that.on(window, function() {
                        //that.update();
                        throttle(that.update, {
                            context: that
                        })
                    })
                },
                //监听
                on: function(ele, type, fn) {
                    if(ele.addEventListener) {
                        ele.addEventListener(type, fn, false)
                    } else {
                        ele.attachEvent("on" + type, fn)
                    }
                }
            }
            window.onload = function() {
                new Lazyload("con")
            }
        </script>
    </body>

</html>

 

以上是关于设计模式（节流模式-----图片懒加载）的主要内容，如果未能解决你的问题，请参考以下文章

原生js实现懒加载并节流

JavaScipt设计模式初探-代理模式

JS代理模式实现图片预加载

不是，到底有多少种图片懒加载方式？

设计模式 - 懒加载

面试官：如何用一段代码证明JVM加载类是懒加载模式