JavaScript實現懶載入
阿新 • • 發佈：2019-02-08
常用的懶載入是圖片懶載入，jquery提供了很好的實現
本例要講的是對某一類進入【可視區域】的元素，進行懶載入
這裡的懶載入可以是載入一張圖片，也可是ajax非同步載入內容
比如：頁面如果非常豐富並且很長，需要使用者翻頁瀏覽的情況下
如果要對若干板塊進行懶載入，可以按照本例的思路簡單實現一個
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript"> //dom載入完之後獲取各個容器距離容器頂部的高度 var asyncOffsets = []; $(function(){ asyncOffsets = getOffset(); // 頁面載入完畢之後就主動觸發一次scroll事件,因為頁面頂部可能存在已經進入【可視區域】的元素 $(window).trigger('scroll'); }); // 獲取每個div元素的偏移量 function getOffset(){ var offsets = []; $("div[async=async]").each(function(){ offsets.push($(this).offset().top); }); return offsets; } // 監聽視窗滾動事件 $(window).scroll(function(){ // 可視區域高度 var see = $(this).height(); // 當前文件整體高度 var scroll = $(document).scrollTop(); // 列印 //console.info("可視區域高度：" + see + ";滾動條到頂部的高度：" + scroll); // 如果 (瀏覽器可視高度 + 當前滾動條高度 > 元素的offsetTop) // 說明當前元素已經進入【可視區域】 // 對當前進入可視區域的元素：觸發一些事件,比如是img標籤實現懶載入 // 或者非同步載入一些區域的內容 // 遍歷需要監聽【是否已進入可視區域的元素】,據此來觸發事件 var current; for(var i=0;i<asyncOffsets.length;i++){ if(see+scroll>asyncOffsets[i]){ current = $("div[idx=" + (i+1) +"]"); // 已經載入過的不再載入 if("true"==current.attr("isloaded")){ continue; } // 控制檯列印除錯資訊 console.info(current.html()); // 觸發非同步事件載入內容 loading(i+1); // 一旦被載入過，就不再載入 current.attr("isloaded","true"); } } }); // idx 為當前進入可視區域的物件,本例中就是一個div標籤 // 可以在初始化整個頁面時就為每個div初始化一些引數,這樣div在進入可視區域時可以用到這些引數 function loading(idx){ $.ajax({ type:'POST', url:'http://localhost/ServletJs/LoadServlet', data:{"idx":idx}, dataType: 'html', async:true, success:function(msg){ $("div[idx=" + idx +"]").html(msg); } }); } </script> </head> <body> <div idx="1" async="async" style="height:400px;width:800px;border:1px solid #CCC;">area 1</div> <div idx="2" async="async" style="height:400px;width:800px;border:1px solid #CCC;">area 2</div> <div idx="3" async="async" style="height:400px;width:800px;border:1px solid #CCC;">area 3</div> <div idx="4" async="async" style="height:400px;width:800px;border:1px solid #CCC;">area 4</div> <div idx="5" async="async" style="height:400px;width:800px;border:1px solid #CCC;">area 5</div> <div idx="6" async="async" style="height:400px;width:800px;border:1px solid #CCC;">area 6</div> <div idx="7" async="async" style="height:400px;width:400px;border:1px solid #CCC;float:left;">area 7</div> <div idx="8" async="async" style="height:400px;width:400px;border:1px solid #CCC;float:left;margin-left:20px;">area 8</div> <div idx="9" async="async" style="height:400px;width:800px;border:1px solid #CCC;clear:both;">area 9</div> <div idx="10" async="async" style="height:400px;width:800px;border:1px solid #CCC;">area 10</div> </body> </html>