按需加載的優勢:在實際調查中發現,很多的網民在游覽網站時具有明確的指向性,往往在進入主頁後直接搜索進入自己需要的商品列表內,如果在客戶進入主頁時將主頁信息全部加載完畢後展示給顧客,會極大的浪費網站資源,同時也會降低客戶體驗度,因而按需加載則成為了當今網站構建的主流。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>按需加載圖片</title> <style type="text/css"> *{margin:0px;padding:0px;list-style:none;} ul{ height:auto; overflow:hidden; width:400px; margin:0 auto; } li{ width:300px; height:200px; border:solid 1px #ddd; overflow:hidden; } </style> </head> <body> <ul> <li><img data-src="./sunli/1.jpg" alt="" width="100%"></li> <li><img data-src="./sunli/2.jpg" alt="" width="100%"></li> <li><img data-src="./sunli/3.jpg" alt="" width="100%"></li> <li><img data-src="./sunli/4.jpg" alt="" width="100%"></li> <li><img data-src="./sunli/5.jpg" alt="" width="100%"></li> <li url="./rexiao.php"> </li> </ul> <script type="text/javascript" src="jquery-1.8.3.min.js"></script> <script type="text/javascript"> //綁定窗口的滾動事件 $(window).scroll(function(){ //遍歷檢測裡面的元素尺寸 $('li[isLoaded!=1]').each(function(){ //獲取滾動高度 var sT = $(window).scrollTop(); //獲取窗口的可視區域的高度 var cT = $(window).height(); //獲取元素距離文檔頂部的偏移量 var t = $(this).offset().top; //暫存當前元素對象 var curLi = $(this); //檢測判斷 if(t <= sT + cT){ //檢測是否具有url屬性 var url = $(this).attr('url'); //如果有 發送ajax 獲取請求之後的數據 if(url){ //發送ajax $.get('rexiao.php',{}, function(data){ curLi.html(data); return; }) } //這個時候要顯示了 修改元素的src屬性 var src = $(this).find('img').attr('data-src'); //設置 $(this).find('img').attr('src',src); //做標識 $(this).attr('isLoaded','1'); } }) }) //使用代碼來觸發滾動事件 $(window).trigger('scroll'); </script> </body> </html>
以上這篇如何使用AJAX實現按需加載【推薦】就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持。