大概是懶加載的簡單實現

這個是之前學習寫的，最近正好要用到懶加載，如今簡單的複習複習。

記得沒錯的話是學習了這篇文章後

https://www.jianshu.com/p/cea62b6868ce

來看看這個demo長什麼樣

先來分析一波，看圖片

HTML代碼就不貼出來了，直接看js代碼，後面有地址能夠下載。

1.監聽滑動事件

　　 var lazyLoad={}; var isblock = true;//初始可見塊爲可見
    var timer=1;//加載計數
    var $block;//可見塊
 window.lazyLoad=lazyLoad;//暴露對象
    //監聽滑動
    $("body").on('scroll',function(){ //若是不可見
        if(!isblock){ return } //判斷可見塊是否可見
        if(lazyLoad.isVisible($block)){ lazyLoad.init($block)//開始加載
 } });

2.判斷目標塊是否進入人們視野

　　//是否可見
    lazyLoad.isVisible=function($element){ var winHight = $(window).height(),//屏幕高度
            distanceTop = $element.offset().top;//可見塊與距離頂部
        //判斷元素是否進入視野
        if(distanceTop <= winHight){ console.log("開始加載"); return true }else{ return false } }

3.開始加載

    lazyLoad.init=function(input){ $block=input; //獲取數據
        lazyLoad.getdata(function(datalist){ isblock=true; //遍歷數據
            $.each(datalist,function(index,history){ // 拿到的數據進行拼接
                var $node = lazyLoad.addNode(history) $('.history-container').append($node) }); }); $block.css("visibility","visible"); isblock=false; };

4.ajax請求

 lazyLoad.getdata=function(callback){ $.ajax({ url:"http://yyyxuan.cn/lay-eggs/js/test.php", type: "POST", data:"time="+timer }).done(function(ret){ //轉化json var json=$.parseJSON(ret); if (json==null) { $block.css("visibility","visible"); $block.text("到底了"); return; } else{$block.css("visibility","hidden");} callback(json.data); timer++; }); };

 5.元素拼接

lazyLoad.addNode=function(dataitems){ var cardnode = '須要拼接的內容'; return $(cardnode); };

6.在頁面調用init()，並傳入這個目標塊

lazyLoad.init($('#visible-block'));

附GitHub地址

https://github.com/steffenx/H5Lazyload