jQuery神技巧！輕松實現異步加載，讓你的網頁速度

jQuery神技巧！輕松實現異步加載，讓你的網頁速度翻倍！

現代網頁設計中，用戶體驗是至關重要的，而網頁加載速度是影響用戶體驗的重要因素之一。通過使用jQuery的AJAX技術，可以實現異步加載，提升網頁的加載速度，讓用戶享受更流暢的瀏覽體驗。本文將向你介紹如何使用jQuery的AJAX技術實現異步加載，并分享一些優化技巧，幫助你輕松提升網頁的加載速度，讓你的網頁成為爆款！

正文：

一、AJAX簡介及優勢

AJAX（Asynchronous JavaScript and XML）是一種在不重新加載整個網頁的情況下，通過后臺與服務器進行數據交互的技術。它的優勢在于可以異步加載數據，提升網頁的加載速度，提高用戶體驗。

二、使用jQuery的AJAX方法實現異步加載

2.1 引入jQuery庫

在使用jQuery的AJAX技術之前，首先需要引入jQuery庫。可以通過以下代碼在HTML文件中引入jQuery庫：

<script src="https://cdn.jsdelivr.net/jquery/3.5.1/jquery.min.js"></script>

2.2 使用$.ajax()方法發送異步請求

$.ajax()方法是jQuery中用于進行異步請求的核心方法。它可以發送GET、POST等類型的請求，并處理服務器返回的數據。以下是一個使用$.ajax()方法實現異步加載的示例代碼：

$.ajax({
  url: "your_url", // 請求的URL地址
  type: "GET", // 請求方法（GET或POST）
  dataType: "json", // 服務器返回的數據類型
  success: function(response) { // 請求成功時的回調函數
    // 處理服務器返回的數據
  },
  error: function(xhr, status, error) { // 請求失敗時的回調函數
    // 處理請求失敗的情況
  }
});

2.3 使用$.get()和$.post()方法發送簡化的異步請求

除了$.ajax()方法，jQuery還提供了$.get()和$.post()方法，用于發送簡化的異步請求。$.get()方法用于發送GET請求，$.post()方法用于發送POST請求。以下是一個使用$.get()方法實現異步加載的示例代碼：

$.get("server_url", function(response) {
  // 處理服務器返回的數據
});

三、優化技巧，提升加載速度

3.1 壓縮和合并JavaScript和CSS文件

將多個JavaScript和CSS文件壓縮和合并成一個文件，可以減少文件的大小和數量，提升加載速度。

3.2 使用CDN加速

將靜態資源（如JavaScript庫、CSS文件、圖片等）托管到CDN（內容分發網絡）上，可以加快資源的加載速度，提升網頁的響應速度。

3.3 使用瀏覽器緩存

通過設置合適的緩存策略，讓瀏覽器緩存靜態資源，可以減少重復請求，提升加載速度。

3.4 延遲加載和懶加載

對于一些非關鍵內容，可以使用延遲加載和懶加載的方式進行加載，提升頁面的初次加載速度。

結語：

通過本文的介紹，相信你已經掌握了如何使用jQuery的AJAX技術實現異步加載，并學到了一些優化技巧，能夠提升網頁的加載速度。記住要引入jQuery庫，使用$.ajax()、$.get()或$.post()方法發送異步請求，同時結合優化技巧，讓你的網頁速度翻倍.

見瀑布流當鼠標滾動到瀏覽器底部的時候（或者手機中滑到屏幕底部），就會發起一個ajax的請求。在服務端生成item列表后，通過 js append到相應的div里邊。

看起來很簡單的樣子，關鍵問題就出在圖片的加載問題上，圖片一般都放在服務器上，通過http下載到客戶端。

例如我的圖片地址：

http://xxx.xxx.com/sc/item/cover/9-4352-c400.jpg

而圖片下載到本地是需要一定時間的(網速快的路過，當然也要考慮服務器帶寬，比如服務器下行帶寬就200kb，那你本地網速100MB也沒用，還是按照200kb下載的，其中還不算耗能)。當圖片還沒有下載完的時候，使用js獲取到元素的寬高將會是0。

-------------------------------------------------------------------

懂一點的同學可能會說，我使用jquery的ready不就好了。如下：

$(document).ready(function(){

// 你的代碼...

});

如果這么簡單就好了，我這里就說下ready與window.onload的區別。

jquery的ready只是dom的結構加載完畢，便視為加載完成。(缺點是圖片沒有加載完畢，寬高為0，程序出錯)

js的window.onload是指dom的生成和資源的加載，比如flash、圖片完全加載出來后才執行onload。(缺點就是當某一張圖片很大的時候，豈不阻止了其它js的正常執行)

-------------------------------------------------------------------------------------

知道了他們的區別后，我們再來談談如何避免錯誤和選擇性使用。

如果你進行了百度，很多人會告訴你。

這樣：

$('img').load(function(){

// 加載完成

});

好像很強大的樣子，其實不然，他的缺點是每加載一張圖片，回調函數就執行一次。好吧太煩了，我只想全部加載完走一次就可以了。當然可以，你可以進行修改如下：

va imgNum=$('img').length;

$('img').load(function(){

if(!--imgNum){

// 加載完成

}

});

這樣總可以了吧，我加載一張，就用圖片總數去減一，減到0我就加載完畢。看起來很完美，前提是你沒遇到IE。

IE的圖片總是從緩存文件里去拿，這就造成load方法根本就不執行，只有是新圖片才會走load。

服了吧？繼續往下看。

---------------------------------------------------------------

或者是這樣：

document.getElementById('img').onload=function(){

// 加載完成

};

看我原生代碼一統天下，實際上效果甚微，一次只能處理一個你準備寫多少個document，有人說我可以用循環去綁定，經過我測試貌似根本沒效果。

還是一笑而過吧。看看我的最終解決方案（兼容：谷歌&火狐&IE）

-------------------------------------------------------------

利用圖片沒有加載完成的時候，寬高為0。我們很容易判斷圖片的一個加載情況。如下：

var t_img; // 定時器

var isLoad=true; // 控制變量

// 判斷圖片加載狀況，加載完成后回調

isImgLoad(function(){

// 加載完成

});

// 判斷圖片加載的函數

function isImgLoad(callback){

// 注意我的圖片類名都是cover，因為我只需要處理cover。其它圖片可以不管。

// 查找所有封面圖，迭代處理

$('.cover').each(function(){

// 找到為0就將isLoad設為false，并退出each

if(this.height===0){

isLoad=false;

return false;

}

});

// 為true，沒有發現為0的。加載完畢

if(isLoad){

clearTimeout(t_img); // 清除定時器

// 回調函數

callback();

// 為false，因為找到了沒有加載完成的圖，將調用定時器遞歸

}else{

isLoad=true;

t_img=setTimeout(function(){

isImgLoad(callback); // 遞歸掃描

},500); // 我這里設置的是500毫秒就掃描一次，可以自己調整

}

獎和開盲盒性質一樣的都是通過ajax讀取后臺的隨機數據。

圖1 轉輪盤抽獎

圖2 轉輪盤抽獎結果

1、轉輪盤

本來是想直接繪圖實現輪盤，但是沒有找到怎么填充文字，只好把輪盤弄成了背景圖，通常用于游戲抽道具，商城積分抽獎，公司年末員工抽獎

點擊抽獎觸發jquery的click事件；
通過ajax獲取后臺的隨機數；
后臺通過mt_rand得到隨機獎項（角度），返回給前臺；
通過jquery改變css transform、transition屬性，旋轉背景，也就是輪盤；

html代碼

<style>
.box{
    width:500px;height:500px;border:0px solid #DDD;margin:100px;position:relative;
}
.beij{
    background:url(cjbg.jpg) no-repeat center center;width:100%;height:100%;
}
.pointer{
    cursor:pointer;position:absolute;top:50%;left:50%;margin-left:-40px;margin-top:-48px;background:url(c1.png) no-repeat center center;width:80px;height:96px;z-index:21;
}
</style>

<div  class='box' >
    <div  class='beij'></div>
    <div  class='pointer'></div>
</div>

js代碼

<script>
$(document).ready(function() {
	var time=0.4;//轉一圈所需時間 s
	var count=10;//默認多轉幾圈
	/*
	var angle=new Array();
	angle[0]=23;
	angle[1]=53;
	angle[2]=83;
	angle[3]=110;
	angle[4]=133;
	angle[5]=163;
	angle[6]=223;
	*/
	var i=1;
    $(".pointer").click(function(){ 
		$.ajax({
			url: "/public/man/index.php/api/choujiang",
			data:'',
			type: "post",
			dataType: "json",
			success: function(result) {
				//console.log(result.msg);
				$('.beij').css({'transform':"rotate("+(i*count*360+result.angle)+"deg)","transition":" All "+(time*(5+result.angle/360))+"s ease-in-out"});
				//彈窗提示
        //setTimeout("alert('"+result.msg+"');",time*1000*(5+result.angle/360));
        setTimeout("console.log('"+result.msg+"');",time*1000*(5+result.angle/360));
			}
		})
		i++;
	});
});
</script>

說明：

因為改變css進行旋轉，開始的時候，直接執行了彈窗或者是console.log，這并不符合我們的要求，加入了setTimeout，在旋轉完成以后，再給出提示；
time*1000*(5+result.angle/360) 是總得旋轉時間；

后臺接口程序

    public function choujiang(){
		/*
		    id   獎品編號
			title  中獎提示
			prec  中獎概率
			angle  旋轉角度
		*/
		$arr[0]=array('id'=>1,'title'=>'恭喜抽中一等獎：蘋果手機一部！','prec'=>1,'angle'=>23);
		$arr[1]=array('id'=>2,'title'=>'恭喜抽中二等獎：Ipad','prec'=>2,'angle'=>68);
		$arr[2]=array('id'=>3,'title'=>'恭喜抽中三等獎：','prec'=>25,'angle'=>113);
		$arr[3]=array('id'=>4,'title'=>'恭喜抽中四等獎','prec'=>50,'angle'=>155);
		$arr[4]=array('id'=>5,'title'=>'恭喜抽中五等獎','prec'=>80,'angle'=>202);
		$arr[5]=array('id'=>6,'title'=>'恭喜抽中六等獎','prec'=>150,'angle'=>245);
		$arr[6]=array('id'=>7,'title'=>'恭喜抽中七等獎','prec'=>240,'angle'=>290);
		$arr[7]=array('id'=>8,'title'=>'獲得50元優惠券，還需加油哦！','prec'=>380,'angle'=>337);

        //中獎幾率求和
		$cmun=0;
		for($i=0;$i<=count($arr)-1;$i++){
			$cmun+=$arr[$i]['prec'];
		}
        //中獎隨機數
        $smrand=mt_rand(1,$cmun);
        $this->getRand(1,0,$arr,count($arr),$smrand);			
	}

    public function getrand($m,$im,$arr,$count,$smrand){
		/*
		    $m  起始數
			$im  第幾個數組元素
			$count  數組總得元素個數
			$arr  原始數組
			$smrand  中獎隨機數
		*/

        //已經中獎
		if($smrand>=$m&&$smrand<=$arr[$im]['prec']+$m-1){
				//中獎返回
				$msg=array('msg'=>$arr[$im]['title'],'angle'=>$arr[$im]['angle'],'smrand'=>$smrand);
				exit(json_encode($msg,JSON_UNESCAPED_UNICODE));			   
		}else{
		   //最后一個不需要判斷  直接返回
		   if($im+1==$count-1){
				$msg=array('msg'=>$arr[$count-1]['title'],'angle'=>$arr[$count-1]['angle'],'smrand'=>$smrand);
				exit(json_encode($msg,JSON_UNESCAPED_UNICODE));		
		   }else{
		       //起始數字
			   $start=$arr[$im]['prec']+$m;
			   //遞歸  再次調用數組  讀取下一個數組元素
			   $this->getrand($start,$im+1,$arr,$count,$smrand);
		   }
		}
	
	}

說明：

以上概率算法采用的是所有概率求和做分母、出現的概率做分子，如果才有百分比，實現方式是一樣的；
采用遞歸，依次判斷每一次的起始數字和結束數字，中獎的隨機數是否在該范圍內，在，就是中得該獎項，否則沒中，再判斷下一個；
最后一個數組元素是不需要判斷的，前邊的都不是，最后一個一定就是中獎；
記錄誰獲得了什么獎項，應該是在后臺返回數據之前，不能是前臺彈窗以后通過ajax通知后臺中獎信息；

2、隨機抽取一個幸運員工

點擊開始抽獎，單行文本框循環顯示員工，抽獎按鈕文字變為停止，點擊停止的時候，抽中的員工顯示在獲獎名單。

圖3 隨機抽取幸運員工

html代碼

<style>
body{
    background:#DDD;
}
.title{
    height:40px;line-height:40px;font-size:14px;font-weight:bold;margin:100px 0 0 100px;
}
.box{
    width:700px;height:200px;border:1px solid #EEE;border-radius:8px;background:#FFF;margin-left:100px;
}
.box li{height:30px;line-height:30px;}
.cjbtn{
    margin:10px 0 0 100px;
}
#ygname{
    padding:3px 5px;;
}

</style>
<div class='title'>獲獎名單</div>
<div  class='box' >
  <ul>
  </ul>
</div>
<div class='cjbtn'><input type='text' id='ygname' /> <button id='choujiang'>開始抽獎</button></div>

js代碼

<script>
    var t;
	var yuangong=new Array();
	$.ajax({
			url: "/public/man/index.php/api/yuangong",
			data:'',
			type: "post",
			dataType: "json",
			success: function(result) {
				yuangong=result.msg

			}
	})

  
$(document).ready(function() {

    $("#choujiang").click(function(){ 
		if($(this).html()=='開始抽獎'){
          if(yuangong.length>=3){
			$(this).html("停止");
			start();
		  }
		}else{
		    $(this).html("開始抽獎");
			stop();
		}
	});
});

function start() {
	num=Math.floor(Math.random() * (yuangong.length-1));
	$('#ygname').val(yuangong[num]['title']);
	t=setTimeout(start, 0);
}
function stop() {
	clearInterval(t);
	//數組中刪除中獎員工信息防止重復中獎
	yuangong.splice($.inArray(yuangong[num], yuangong), 1);
	$(".box  ul").append("<li>"+$('#ygname').val()+"</li>");

}

</script>

說明：

num=Math.floor(Math.random() * (yuangong.length));

yuangong.length員工數組長度；
Math.random() 0到1的小數，包含0，不包含1；
Math.floor 小數向下取整，可以為0；

綜上：num得到的是0到數組下標的隨機數。

clearInterval(t)：用于停止t=setTimeout(start, 0);

后臺php接口程序

    public function yuangong(){
		$yuangong[0]=array('id'=>1,'title'=>'業務部【張三】');
		$yuangong[1]=array('id'=>2,'title'=>'技術部【李四】');
		$yuangong[2]=array('id'=>3,'title'=>'技術部【逍遙】');
		$yuangong[3]=array('id'=>4,'title'=>'會計部【薛嫣】');
		$yuangong[4]=array('id'=>5,'title'=>'行政部【王五】');
		$yuangong[5]=array('id'=>6,'title'=>'行政部【王天林】');
		$yuangong[6]=array('id'=>7,'title'=>'行政部【李笑和】');

		$msg=array('msg'=>$yuangong);
		exit(json_encode($msg,JSON_UNESCAPED_UNICODE));	
	}

3、隨機抽取多個幸運員工

沒有想到什么效果，只是單純地獲取了隨機數

html代碼

<style>
body{
    background:#DDD;
}
.title{
    height:40px;line-height:40px;font-size:14px;font-weight:bold;margin:100px 0 0 100px;
}
.box{
    width:700px;height:200px;border:1px solid #EEE;border-radius:8px;background:#FFF;margin-left:100px;
}
.box li{height:30px;line-height:30px;}
.cjbtn{
    margin:10px 0 0 100px;
}
#ygname{
    padding:3px 5px;;
}

</style>
<div class='title'>獲獎名單</div>
<div  class='box' >
  <ul>
  </ul>
</div>
<div class='cjbtn'> <button id='choujiang'>開始抽獎</button></div>

js代碼

<script>
var yuangong=new Array();
var ygstr='';//存取獲獎員工
var ygrs=5;//一次抽幾個
var t;
$.ajax({
			url: "/public/man/index.php/api/yuangong",
			data:'',
			type: "post",
			dataType: "json",
			success: function(result) {
				yuangong=result.msg

			}
})

$(document).ready(function() {
    $("#choujiang").click(function(){ 
		if(yuangong.length>=ygrs){
		    start(1);
		}
	});
});

function start(ms) {
   //ms  第幾次獲取員工信息
   num=Math.floor(Math.random() * (yuangong.length));
   console.log(num);
   ygstr+="<li>"+yuangong[num]['title']+"</li>";
   if(ms>=ygrs){
	   $(".box  ul").html(ygstr);
	   ygstr="";
   }else{
	   yuangong.splice($.inArray(yuangong[num], yuangong), 1);
       start(ms+1);
   }
    	
}
</script>

4、在線開盲盒

需要我們點擊抽獎的時候通過ajax讀取后臺獲得的盲盒信息，直接顯示到前臺，前臺顯示同上邊的，都是一樣，說一下后臺程序。

使用array_rand().隨機獲取幾個數組元素

array_rand($arr,$count).用法

$arr目標數組；
$count隨機的個數;

返回值是原數組的下標。

    public function manghe(){
	
		$goods[0]=array('id'=>1,'title'=>'手機');
		$goods[1]=array('id'=>2,'title'=>'毛絨玩具');
		$goods[2]=array('id'=>3,'title'=>'化妝品');
		$goods[3]=array('id'=>4,'title'=>'啫喱水');
		$goods[4]=array('id'=>5,'title'=>'面膜');
		$goods[5]=array('id'=>6,'title'=>'學習用品');
		$goods[6]=array('id'=>7,'title'=>'電腦');

		$getarr=array_rand($goods,3);
		$i=0;
		foreach($getarr as $k){
		    $rearr[$i]=$goods[$k];
			$i++;
		}

		$msg=array('msg'=>$rearr);
		exit(json_encode($msg,JSON_UNESCAPED_UNICODE));	
	}

如果包含特殊獎項，需要滿足抽獎多少次，一定抽中，可以達到抽獎次數以后在array_rand內隨機數減一，然后把大獎塞進該次抽獎的返回信息。

array_push($rearr,$a)用法：

$rearr目標數組；
$a追加的元素或者是數組

    $tebie[999]=array('id'=>999,'title'=>'特別大獎');
		$goods[0]=array('id'=>1,'title'=>'手機');
		$goods[1]=array('id'=>2,'title'=>'毛絨玩具');
		$goods[2]=array('id'=>3,'title'=>'化妝品');
		$goods[3]=array('id'=>4,'title'=>'啫喱水');
		$goods[4]=array('id'=>5,'title'=>'面膜');
		$goods[5]=array('id'=>6,'title'=>'學習用品');
		$goods[6]=array('id'=>7,'title'=>'電腦');

		$getarr=array_rand($goods,3);
		$i=0;
		foreach($getarr as $k){
		    $rearr[$i]=$goods[$k];
			$i++;
		}
        array_push($rearr,$tebie[999]);

        dump($rearr);

        exit;

輸出結果：

在線咨詢

上一篇：世界上最奇葩的網站到底有多奇葩？
下一篇：Fastadmin框架聚合數字生活抵扣卡系統v2.

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

jQuery神技巧！輕松實現異步加載，讓你的網頁速度

您的項目需求