1. 程式人生 > >同時載入多張圖片遭遇502 bad gateway的解決方案

同時載入多張圖片遭遇502 bad gateway的解決方案

前段時間做了一個頁面同時載入多張圖片,也就是同時多個請求訪問圖片伺服器,遭遇了502 bad gateway,糾結了很久,差點圓寂於此,不知道是不是伺服器的限制問題,而我的解決方案是:

1.每張圖片間隔30ms後加載,當然不必糾結這個數字,你可以設定大點;

睡眠的JS程式碼如下:

function sleep(numberMillis) {
    var now = new Date();
    var exitTime = now.getTime() + numberMillis;
    while (true) {
        now = new Date();
        if (now.getTime() > exitTime)
            return;
    }
}

2.在圖片標籤上設定onerror屬性,onerror="imgPicError(this)",遇到請求錯誤,讓其多請求幾次,最後顯示預設圖片

function imgPicError(obj, n){
	if(n == 1){
		sleep(30);
		var path = $(obj).attr("src").split("?")[0];
		$(obj).attr("onerror", "imgPicError(this, 2)");
		$(obj).attr("src", path+"?n=2");
	}else if(n == 2){
		obj.src='static/images/picture/default.png';
		obj.onerror = null;
	}else{
		sleep(30);
		var path = $(obj).attr("src");
		$(obj).attr("onerror", "imgPicError(this, 1)");
		$(obj).attr("src", path+"?n=1");
	}
}