zoukankan      html  css  js  c++  java
  • 懒加载lazyload

    var docElement = document.compatMode === 'BackCompat' ? document.body : document.documentElement;
    //如果是非标准,则是document.body,不然是document.documentELement,计算clientHeight用到
        var defaults = {
            lazyAttr: 'lazy_src',//保存SRC的自定义属性
            upBuffer: 100,//向上缓冲的距离
            downBuffer: 100,//向下缓冲的距离
            bufferTime: 100,//滚动时缓冲的时间
            defultSrc: ''//初始化时的默认图片
        }
        function getTop(el){
            if(!el) return null;
            var element = el,
                offsetTop = element.offsetTop;
            while(element = element.offsetParent){
                offsetTop += element.offsetTop;
            }
            return offsetTop;
        }
        function LazyLoad(sel, options){//sel为需要懒加载的选择器字符串
            var that = this;
            this.opt = $.extend(defaults, options);
            this.el = [];//元素
            this.elList = [];//包含元素,src的对象数组
            this.lazyList = [];
            this.sel = sel;
            this.gt = null;//计时器
    
            $(function(){
                that.el = $(that.sel).filter('[' + that.opt.lazyAttr + ']');
                that.el.forEach(function(item, index){//item是原生dom
                    that.opt.defultSrc && $(item).attr('src', that.opt.defultSrc);
                    var lazySrc = $(item).attr(that.opt.lazyAttr);
                    lazySrc && that.elList.push({
                        el: $(item),
                        src: lazySrc
                    });
                })
                that.num = that.elList.length;
                that.loadEl();
                that.bindEvent();
            })
        }
        LazyLoad.fn = LazyLoad.prototype;
        LazyLoad.fn.bindEvent = function(){
            var that = this;
            $(window)
            .bind('resize', function(){
                that.lazyLoadEl();
            })
            .bind('scroll', function(){
                that.lazyLoadEl();
            })
        }
        LazyLoad.fn.getlazyList = function(){
            var that = this,
                offset = window.scrollY,//向上滚动的距离
                beforeOffset = offset - that.opt.upBuffer,
                visiOffset = offset + docElement.clientHeight + that.opt.downBuffer;//可视区域的距离
            that.lazyList = that.elList.filter(function(item, index){
                var elNow = item.el.get(0);
                elNow.top = getTop(elNow);
                return !elNow.loaded && elNow.top < visiOffset && elNow.top > beforeOffset;
            })
            return that.lazyList;
        }
        LazyLoad.fn.lazyLoadEl = function(){
            var that = this;
            clearTimeout(that.gt);
            that.gt = setTimeout(function(){
                that.loadEl();
            }, that.opt.bufferTime);
        }
        LazyLoad.fn.loadEl = function(){
            var that = this;
            if(that.num < 1 || that.getlazyList().length < 1){
                clearTimeout(that.gt);
                return;
            }
            $(that.lazyList).forEach(function(item, index){
                item.el.attr('src', item.src);
                item.loaded = true;//已经设置过src的再次计算到就过滤掉
                that.num--;
            })
        }
  • 相关阅读:
    Microsoft Updateclient更新
    DataTables warning: table id=dataTable
    BCB使用线程删除目录中的图片
    grep常见使用方法总结
    实战:percona-xtrabackup 2.1.9 for mysql 5.6.19
    代理模式之cglib动态代理
    hello world to php( mac 配置 xmapp virtual host)
    Android开发之AlarmManager具体解释
    linux入门教程(六) Linux文件与目录管理
    linux入门教程(五) Linux系统的远程登录
  • 原文地址:https://www.cnblogs.com/jingwensophie/p/4758189.html
Copyright © 2011-2022 走看看