zoukankan      html  css  js  c++  java
  • 页面的懒加载

            'lazyQueue': {},
            'isVisiable': function(elem) {
                if (!elem) return false;
                // console.log(($(window).scrollTop()+"::"+($(elem).offset().top+$(elem).outerHeight()))+"::"+(($(window).scrollTop()+$(window).height())+"::"+$(elem).offset().top))
                return ($(window).scrollTop() <= ($(elem).offset().top + $(elem).outerHeight())) && (($(window).scrollTop() + $(window).height()) > $(elem).offset().top);
            },
            'lazyload': function(elem, htmlcode, item, cb) {
                elem.html(htmlcode.html);
                elem.css('display', 'block');
                if (elem && elem.length != 0) {
                    var top = elem.offset().top;
    
                    if (this.isVisiable(elem)) {
                        this.showImg(elem);
                        cb && cb.apply(this, arguments);
                        return;
                    }
                    if (this.lazyQueue[top]) {
                        this.lazyQueue[top].push({
                            'elem': elem,
                            'html': htmlcode,
                            'item': item,
                            'loaded': false,
                            'callback': cb
                        });
                    } else {
                        this.lazyQueue[top] = [{
                            'elem': elem,
                            'loaded': false,
                            'callback': cb
                        }];
                    }
                }
    
            },
            'showImg': function(elem) {
                var imgs = elem.find('img');
                for (var i = 0; i < imgs.length; i++) {
                    $(imgs[i]).attr('src', $(imgs[i]).attr('data-src')).fadeIn(500);
                }
            },
     $(window).bind("scroll", function() {
            var Ad = LETV.using('Plugin').AD;
            if (Ad.lazySt)
                clearTimeout(Ad.lazySt);
            Ad.lazySt = setTimeout(function() {
                var curHeight = $(window).height() + $(window).scrollTop(),
                    lazyQueue = Ad.lazyQueue;
                for (var key in lazyQueue) {
                    if (lazyQueue.hasOwnProperty(key)) {
                        var item = lazyQueue[key];
                        if (!item) continue;
                        for (var j = 0; j < item.length; j++) {
                            var mItem = item[j];
                            if (mItem && !mItem.loaded && Ad.isVisiable(mItem.elem)) {
                                if (mItem.loaded === false) {
                                    mItem.cb && typeof mItem.cb == 'function' && mItem.cb();
                                    Ad.showImg(mItem.elem);
                                    mItem.loaded = true;
                                } else {
                                    mItem = null;
                                }
                            }
                        }
                    }
                }
    
            }, 200);
        });
    

      

  • 相关阅读:
    高德地图在h5项目中的集成(点标记)
    angular中点击页面任意地方让显示的元素消失
    关于echars中雷达图的一些配置
    部署项目到阿里云服务器上遇到的问题
    sql语句的简单记录
    C#中的数据类型
    原型和继承
    Git 命令行使用
    以前一直设置水平居中,现在我们来讨论一下图片居中的四种小技巧
    让盒子两端对齐小技巧 => inline-block
  • 原文地址:https://www.cnblogs.com/coding4/p/5864490.html
Copyright © 2011-2022 走看看