zoukankan      html  css  js  c++  java
  • javascript原生图片懒加载

    一,原生javascript图片懒加载

    1. 使用方法,例如

    // 要绑定的图片地址
    <img data-src={url} alt=" ">

    2. 在页面中引入下列原生javascript代码

    var Lazy = {
        "Img": null,
        "getY": function(b) {
            var a = 0;
            if (b && b.offsetParent) while (b.offsetParent) a += b.offsetTop, b = b.offsetParent; else b && b.y && (a += b.y);
            return a;
        },
        "getX": function(b) {
            var a = 0;
            if (b && b.offsetParent) while (b.offsetParent) a += b.offsetLeft, b = b.offsetParent; else b && b.x && (a += b.X);
            return a;
        },
        "scrollY": function() {
            var a = document.documentElement;
            return self.pageYOffset || a && a.scrollTop || document.body.scrollTop || 0;
        },
        "scrollX": function() {
            var a = document.documentElement;
            return self.pageXOffset || a && a.scrollLeft || document.body.scrollLeft || 0;
        },
        "windowWidth": function() {
            var a = document.documentElement;
            return self.innerWidth || a && a.clientWidth || document.body.clientWidth;
        },
        "windowHeight": function() {
            var a = document.documentElement;
            return self.innerHeight || a && a.clientHeight || document.body.clientHeight;
        },
        "CurrentHeight": function() {
            return Lazy.scrollY() + Lazy.windowHeight();
        },
        "CurrentWidth": function() {
            return Lazy.scrollX() + Lazy.windowWidth();
        },
        "Load": function(d) {
            Lazy.Init();
            var f = Lazy.CurrentHeight(), b = Lazy.CurrentWidth();
            for (_index = 0; _index < Lazy.Img.length; _index++) {
                var a = Lazy.Img[_index];
                $(a).attr("lazy") == undefined && $(a).attr("lazy", "n");
                if ($(a).attr("lazy") == "y") continue;
                /*$(a).bind("error", function() {
                    this.id == "subject" ? $(this).attr("src", "") : $(this).attr("src", "http://wap.cmread.com/rbc/p/content/repository/ues/image/s109/nopic.png");
                });*/
                if (d == undefined || d == "" || d == null) {
                    var c = Lazy.getY(a), e = Lazy.getX(a);
                    //e < b && c < f && (a.src = a.getAttribute("data-src"), $(a).attr("lazy", "y"), a.removeAttribute("data-src"));
                    c < f && (a.src = a.getAttribute("data-src"), $(a).attr("lazy", "y"), a.removeAttribute("data-src"));
                    $(a).attr("data-rel",e);
                } else if (d == "x") {
                    var c = Lazy.getX(a);
                    c < b && (a.src = a.getAttribute("data-src"), $(a).attr("lazy", "y"));
                    
                }
            }
        },
        "Init": function() {
            var a = document.querySelectorAll("img[data-src]");
            Lazy.Img = a;
        }
    };
    
    //为滚动轴绑定图片懒加载事件
    document.onscroll = function(){Lazy.Load();};
    setTimeout(function(){Lazy.Load();},100);//默认配置懒加载
  • 相关阅读:
    Node 文件上传,ZIP
    jquery实现前台倒计时。应用下单24小时后自动取消该订单
    solr 4.4添加索引是新手容易遇到的问题
    solr 4.6的安装配置
    java.lang.OutOfMemoryError: PermGen space
    java.sql.SQLException: Access denied for user 'root'@'localhost' (using password: NO)
    mybatis代码生成(generator工具生成代码)
    再次熟悉jdbc连接mysql
    魔方阵,奇数阵。输入一个奇数,产生一个魔方阵
    错误,这个如何解决呢?内存溢出的问提。把JAVA_OPTS="-server -XX:PermSize=64M -XX:MaxPermSize=128m 还是不行
  • 原文地址:https://www.cnblogs.com/yyy6/p/8116807.html
Copyright © 2011-2022 走看看