今天在做一个js loading效果的页面的时候发现在Chrome下图片显示不出来,过程如下:
在这个页面中在“<a href="/xxx/xxxx" class="elink">进入</a>” ,点击这个链接会请求到服务器端做跳转,用js给这个链接绑定Click事件,
在点击的时候给给页面加一个遮罩里面有一个loading的图片,部分代码如下:
LOADING_INNERHTML: ['<div class="model_popup_layer" style="background:none;">',
'<div class="onload_layer"><img src="{0}/loading.gif" /></div>',
'</div>'].join(''),
loading: function() {
this.layer = new Dialog(String.Format(.view.LOADING_INNERHTML, this.staticUrl), {
title: "",
height: 100,
200,
close: false
});
return this.layer;
}
'</div>'].join(''),
loading: function() {
this.layer = new Dialog(String.Format(.view.LOADING_INNERHTML, this.staticUrl), {
title: "",
height: 100,
200,
close: false
});
return this.layer;
}
$(".elink").click(function() {
view.loading();
});
在ie和firefox下都正常 但是在chrome下图片显示不出来,
发现在点击之后,chrome竟然终止请求图片, 在网上查了一下也没找到类似的问题,只好自己调试,
发现如果点击链接请求到服务器端时,如果此时我终止请求,然后编辑一下图片属性,图片就会加载出来,
加载出来之后,刷新页面图片就会显示,所以没有办法,只好在页面加一个隐藏的图片,打开页面时就加载图片,
点击链接时,弹出层就不用再去请求图片了,此时问题得到解决。 好了,下班了,祝大家周末快乐