按需載入的優勢：在實際調查中發現,很多的網民在遊覽網站時具有明確的指向性,往往在進入首頁後直接搜尋進入自己需要的商品列表內,如果在客戶進入首頁時將首頁資訊全部載入完畢後展示給顧客,會極大的浪費網站資源,同時也會降低客戶體驗度,因而按需載入則成為了當今網站構建的主流。
<!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實現按需載入【推薦】就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援雲棲社區。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
