<!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>