同時載入多張圖片遭遇502 bad gateway的解決方案
阿新 • • 發佈:2019-01-05
前段時間做了一個頁面同時載入多張圖片,也就是同時多個請求訪問圖片伺服器,遭遇了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"); } }