zoukankan      html  css  js  c++  java
  • 设计模式(节流模式-----图片懒加载)

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

      废话不多说,直接懒加载代码吧!哈哈

      

     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 {
                     300px;
                    height: 200px;
                    overflow: hidden;
                    margin: auto;
                }
                
                img {
                     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>
  • 相关阅读:
    java wait方法
    thread join
    AtomicReference 原理
    exchanger java另一种栅栏
    CyclicBarrier 栅栏 原理,应用场景
    信号量Semaphore
    FutureTask 解析
    CountDownLatch
    java 双端队列 Deque
    lockInterruptibly 和lock 原理
  • 原文地址:https://www.cnblogs.com/hsp-blog/p/5897393.html
Copyright © 2011-2022 走看看