同时加载多张图片遭遇502 bad gateway的解决方案

前段时间做了一个页面同时加载多张图片，也就是同时多个请求访问图片服务器，遭遇了502 bad gateway，纠结了很久，差点圆寂于此，不知道是不是服务器的限制问题，而我的解决方案是：1.每张图片间隔30ms后加载，当然不必纠结这个数字，你可以设置大点；睡眠的JS代码如下：function sleep(numberMillis) {var now = new Date();

爱死费崇政

4545人浏览 · 2016-10-20 16:58:39

爱死费崇政 · 2016-10-20 16:58:39 发布

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