JQuery DomLazyLoad插件

来源：互联网发布：天津大学网络教学编辑：程序博客网时间：2024/05/10 08:03
<!DOCTYPE html><html lang="en"><head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  <meta charset="utf-8">  <title>Data Lazy Load Simple</title>  <script src="jquery.js"></script>  <meta name="viewport" content="width=device-width, initial-scale=1.0">  </script>  <style type="text/css">    .main {        width:980px;        margin:0 auto;    }    .list {        list-style:none;        width:980px;    }    .list .h2 {        font-size: 2em;        text-align:center;    }    .list li{        border:1px solid #CCCCCC;        padding:15px;    }  </style>  <script>    (function($){        // 窗口位置        function getClient(){             var l, t, w, h;             l = document.documentElement.scrollLeft || document.body.scrollLeft;             t = document.documentElement.scrollTop || document.body.scrollTop;             w = document.documentElement.clientWidth;             h = document.documentElement.clientHeight;             return { left: l, top: t, width: w, height: h };         }        // 返回待加载资源位置         function getSubClient(p){             var l = 0, t = 0, w, h;             w = p.offsetWidth;             h = p.offsetHeight;             while(p.offsetParent){                 l += p.offsetLeft;                 t += p.offsetTop;                 p = p.offsetParent;             }             return { left: l, top: t, width: w, height: h };         }        // 判断两个矩形是否相交,返回一个布尔值         function intens(rec1, rec2){             var lc1, lc2, tc1, tc2, w1, h1;             lc1 = rec1.left + rec1.width / 2;             lc2 = rec2.left + rec2.width / 2;             tc1 = rec1.top + rec1.height / 2 ;             tc2 = rec2.top + rec2.height / 2 ;             w1 = (rec1.width + rec2.width) / 2 ;             h1 = (rec1.height + rec2.height) / 2;             return Math.abs(lc1 - lc2) < w1 && Math.abs(tc1 - tc2) < h1 ;         }         // Dom延迟加载器的构造函数        var DomLazyLoader = function(ele,opt){            this.$element =ele;            this.defaults={            }            this.options=$.extend({},defaults, options);                   }        $.fn.lazyLoadDom = function(options,ajaxOptions) {            var defaults = {                status:'SLEEP',//status有3个状态，SLEEP，LOADING，LOADED，分别表示还加载，加载中，已加载                callback:function(dom){}            }            var settings = $.extend({},defaults, options);            var ajaxDefaults = {                type: "GET",                dataType: "json",                error:function(XMLHttpRequest, textStatus, errorThrown){                    console.log(textStatus)                }            }            var ajaxSettings = $.extend({},ajaxDefaults,ajaxOptions)            function doInternal(dom){                var $element = $(dom);                var status = $element.data("lay_load_status");                ajaxSettings.success=function(data){                    $element.data("lay_load_status","LOADED")                    settings.callback(dom,data);                }                if(!status){                    status = "SLEEP";                }                if(status=='SLEEP'){                    $.ajax(ajaxSettings);                    $element.data("lay_load_status",'LOADING');//发起请求之后，接着更改状态                }                if(status=='LOADING' && true){                }            }            // Dom初始化            return this.each(function(){                var dom = this;                var $element = $(dom);                var rec1 = getClient();                var rec2 = getSubClient(dom);                if(intens(rec1, rec2)){                    doInternal($element);                }                $(window).scroll(function(){                     var rec1 = getClient();                    var rec2 = getSubClient(dom);                    if(intens(rec1, rec2)){                        doInternal($element);                    }                });                $(window).resize (function(){                     var rec1 = getClient();                    var rec2 = getSubClient(dom);                    if(intens(rec1, rec2)){                        doInternal($element);                    }                });            });        }    })(window.jQuery);  </script></head><body>    <div id="div1" style="height:1000px;background-color:#f22"></div>    <div id="div2" style="height:1000px;background-color:#fff"></div>    <script type="text/javascript" charset="utf-8">        $("#div1").lazyLoadDom({            callback:function(dom,data){                var rec = data.data;                for(var i=0;i<rec.length;i++){                    var tempDom = $('<div>'+rec[i].id+":"+rec[i].name+'</div>')                    $(dom).append(tempDom)                }            }        },{            url: "data.json"        });        $("#div2").lazyLoadDom({            callback:function(dom,data){                var rec = data.data;                for(var i=0;i<rec.length;i++){                    var tempDom = $('<div>'+rec[i].id+":"+rec[i].name+'</div>')                    $(dom).append(tempDom)                }            }        },{            url: "data2.json"        });    </script></body></html>
0 0