前段时间做了一个页面同时加载多张图片,也就是同时多个请求访问图片服务器,遭遇了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属性,οnerrοr="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");
}
}