按需加載的優勢：在實際調查中發現,很多的網民在游覽網站時具有明確的指向性,往往在進入主頁后直接搜索進入自己需要的商品列表內,如果在客戶進入主頁時將主頁信息全部加載完畢后展示給顧客,會極大的浪費網站資源,同時也會降低客戶體驗度,因而按需加載則成為了當今網站構建的主流。
<!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實現按需加載【推薦】就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持錯新站長站。
新聞熱點
疑難解答
圖片精選
