歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
您现在的位置: Linux教程網 >> UnixLinux >  >> Linux編程 >> Linux編程

如何使用AJAX實現按需加載

按需加載的優勢:在實際調查中發現,很多的網民在游覽網站時具有明確的指向性,往往在進入主頁後直接搜索進入自己需要的商品列表內,如果在客戶進入主頁時將主頁信息全部加載完畢後展示給顧客,會極大的浪費網站資源,同時也會降低客戶體驗度,因而按需加載則成為了當今網站構建的主流;

<!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>

Copyright © Linux教程網 All Rights Reserved