zoukankan      html  css  js  c++  java
  • JS延时加载面向对象版

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>延时加载</title>
    <style type="text/css">
    body,div,ul,li{margin:0;padding:0;}
    #box{770px;margin:0 auto;padding:10px 0 0 10px;background:#f00;overflow:hidden;zoom:1;}
    #box li{float:left;375px;height:225px;color:#fff;padding:10px 0;display:inline;text-align:center;margin:0 10px 10px 0;background:#000 url(http://js.fgm.cc/learn/lesson10/img/lazy/loading.gif) 50% 50% no-repeat;}
    #box li img.loaded{353px;height:225px;vertical-align:middle;}
    </style>
    </head>
    <script type="text/javascript">
    var fgm = {
        on: function(element, type, handler) {
            return element.addEventListener ? element.addEventListener(type, handler, false) : element.attachEvent("on" + type, handler)
        },
        bind: function(object, handler) {
            return function() {
                return handler.apply(object, arguments)    
            }
        },
        pageX: function(element) {
            return element.offsetLeft + (element.offsetParent ? arguments.callee(element.offsetParent) : 0)
        },
        pageY: function(element) {
            return element.offsetTop + (element.offsetParent ? arguments.callee(element.offsetParent) : 0)    
        },
        hasClass: function(element, className) {
            return new RegExp("(^|\\s)" + className + "(\\s|$)").test(element.className)
        },
        attr: function(element, attr, value) {
            if(arguments.length == 2) {
                return element.attributes[attr] ? element.attributes[attr].nodeValue : undefined
            }
            else if(arguments.length == 3) {
                element.setAttribute(attr, value)
            }
        }
    };
    //延时加载
    function LazyLoad(obj) {
        this.lazy = typeof obj === "string" ? document.getElementById(obj) : obj;
        this.aImg = this.lazy.getElementsByTagName("img");
        this.fnLoad = fgm.bind(this, this.load);
        this.load();
        fgm.on(window, "scroll", this.fnLoad);
        fgm.on(window, "resize", this.fnLoad);
    }
    LazyLoad.prototype = {
        load: function() {
            var iScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            var iClientHeight = document.documentElement.clientHeight + iScrollTop;
            var i = 0;
            var aParent = [];
            var oParent = null;
            var iTop = 0;
            var iBottom = 0;
            var aNotLoaded = this.loaded(0);
            if(this.loaded(1).length != this.aImg.length) {
                for(i = 0; i < aNotLoaded.length; i++) {
                    oParent = aNotLoaded[i].parentElement || aNotLoaded[i].parentNode;
                    iTop = fgm.pageY(oParent);
                    iBottom = iTop + oParent.offsetHeight;
                    if((iTop > iScrollTop && iTop < iClientHeight) || (iBottom > iScrollTop && iBottom < iClientHeight)) {
                        aNotLoaded[i].src = fgm.attr(aNotLoaded[i], "data-img") || aNotLoaded[i].src;
                        aNotLoaded[i].className = "loaded";
                    }
                }
            }
        },
        loaded: function(status) {
            var array = [];
            var i = 0;
            for(i = 0; i < this.aImg.length; i++)
            eval("fgm.hasClass(this.aImg[i], \"loaded\")" + (!!status ? "&&" : "||") + "array.push(this.aImg[i])");
            return array
        }
    };
    //应用
    fgm.on(window, "load", function () {new LazyLoad("box")});
    </script>
    <body>
    <ul id="box">
        <li><img src="http://js.fgm.cc/learn/lesson10/img/lazy/none.gif" data-img="http://js.fgm.cc/learn/lesson10/img/lazy/1.jpg" /></li>
        <li><img src="http://js.fgm.cc/learn/lesson10/img/lazy/none.gif" data-img="http://js.fgm.cc/learn/lesson10/img/lazy/2.jpg" /></li>
        <li><img src="http://js.fgm.cc/learn/lesson10/img/lazy/none.gif" data-img="http://js.fgm.cc/learn/lesson10/img/lazy/3.jpg" /></li>
        <li><img src="http://js.fgm.cc/learn/lesson10/img/lazy/none.gif" data-img="http://js.fgm.cc/learn/lesson10/img/lazy/4.jpg" /></li>
        <li><img src="http://js.fgm.cc/learn/lesson10/img/lazy/none.gif" data-img="http://js.fgm.cc/learn/lesson10/img/lazy/5.jpg" /></li>
        <li><img src="http://js.fgm.cc/learn/lesson10/img/lazy/none.gif" data-img="http://js.fgm.cc/learn/lesson10/img/lazy/6.jpg" /></li>
        <li><img src="http://js.fgm.cc/learn/lesson10/img/lazy/none.gif" data-img="http://js.fgm.cc/learn/lesson10/img/lazy/7.jpg" /></li>
        <li><img src="http://js.fgm.cc/learn/lesson10/img/lazy/none.gif" data-img="http://js.fgm.cc/learn/lesson10/img/lazy/8.jpg" /></li>
        <li><img src="http://js.fgm.cc/learn/lesson10/img/lazy/none.gif" data-img="http://js.fgm.cc/learn/lesson10/img/lazy/9.jpg" /></li>
        <li><img src="http://js.fgm.cc/learn/lesson10/img/lazy/none.gif" data-img="http://js.fgm.cc/learn/lesson10/img/lazy/10.jpg" /></li>
        <li><img src="http://js.fgm.cc/learn/lesson10/img/lazy/none.gif" data-img="http://js.fgm.cc/learn/lesson10/img/lazy/11.jpg" /></li>
        <li><img src="http://js.fgm.cc/learn/lesson10/img/lazy/none.gif" data-img="http://js.fgm.cc/learn/lesson10/img/lazy/12.jpg" /></li>
        <li><img src="http://js.fgm.cc/learn/lesson10/img/lazy/none.gif" data-img="http://js.fgm.cc/learn/lesson10/img/lazy/13.jpg" /></li>
        <li><img src="http://js.fgm.cc/learn/lesson10/img/lazy/none.gif" data-img="http://js.fgm.cc/learn/lesson10/img/lazy/14.jpg" /></li>
        <li><img src="http://js.fgm.cc/learn/lesson10/img/lazy/none.gif" data-img="http://js.fgm.cc/learn/lesson10/img/lazy/15.jpg" /></li>
        <li><img src="http://js.fgm.cc/learn/lesson10/img/lazy/none.gif" data-img="http://js.fgm.cc/learn/lesson10/img/lazy/16.jpg" /></li>
        <li><img src="http://js.fgm.cc/learn/lesson10/img/lazy/none.gif" data-img="http://js.fgm.cc/learn/lesson10/img/lazy/17.jpg" /></li>
        <li><img src="http://js.fgm.cc/learn/lesson10/img/lazy/none.gif" data-img="http://js.fgm.cc/learn/lesson10/img/lazy/18.jpg" /></li>
        <li><img src="http://js.fgm.cc/learn/lesson10/img/lazy/none.gif" data-img="http://js.fgm.cc/learn/lesson10/img/lazy/19.jpg" /></li>
        <li><img src="http://js.fgm.cc/learn/lesson10/img/lazy/none.gif" data-img="http://js.fgm.cc/learn/lesson10/img/lazy/20.jpg" /></li>
        <li><img src="http://js.fgm.cc/learn/lesson10/img/lazy/none.gif" data-img="http://js.fgm.cc/learn/lesson10/img/lazy/21.jpg" /></li>
        <li><img src="http://js.fgm.cc/learn/lesson10/img/lazy/none.gif" data-img="http://js.fgm.cc/learn/lesson10/img/lazy/22.jpg" /></li>
        <li><img src="http://js.fgm.cc/learn/lesson10/img/lazy/none.gif" data-img="http://js.fgm.cc/learn/lesson10/img/lazy/23.jpg" /></li>
        <li><img src="http://js.fgm.cc/learn/lesson10/img/lazy/none.gif" data-img="http://js.fgm.cc/learn/lesson10/img/lazy/24.jpg" /></li>
        <li><img src="http://js.fgm.cc/learn/lesson10/img/lazy/none.gif" data-img="http://js.fgm.cc/learn/lesson10/img/lazy/25.jpg" /></li>
        <li><img src="http://js.fgm.cc/learn/lesson10/img/lazy/none.gif" data-img="http://js.fgm.cc/learn/lesson10/img/lazy/26.jpg" /></li>
        <li><img src="http://js.fgm.cc/learn/lesson10/img/lazy/none.gif" data-img="http://js.fgm.cc/learn/lesson10/img/lazy/27.jpg" /></li>
        <li><img src="http://js.fgm.cc/learn/lesson10/img/lazy/none.gif" data-img="http://js.fgm.cc/learn/lesson10/img/lazy/28.jpg" /></li>
        <li><img src="http://js.fgm.cc/learn/lesson10/img/lazy/none.gif" data-img="http://js.fgm.cc/learn/lesson10/img/lazy/29.jpg" /></li>
        <li><img src="http://js.fgm.cc/learn/lesson10/img/lazy/none.gif" data-img="http://js.fgm.cc/learn/lesson10/img/lazy/30.jpg" /></li>
    </ul>
    </body>
    </html>
  • 相关阅读:
    java中判断文件存在与否
    crontab安装以及定时任务的执行
    su命令学习
    linux中如何查看哪些用户允许登录
    linux中的压缩文件的格式
    R语言学习(瑞士军刀)
    linux下mysql导入导出sql文件
    创建线程池的7种方法
    docker运行tomcat
    Docker之镜像
  • 原文地址:https://www.cnblogs.com/huanlei/p/2540695.html
Copyright © 2011-2022 走看看