js stateChanged 图片加载死循环的问题
作者:AntoniotheFuture
关键词:JS、JavaScript、Ajax、XMLHttpRequest、HTML
开发平台:DreamViewer
平台版本上限:未知
平台版本下限:未知
开发语言:
简介:判断是否加载过,避免无效图片和onreadystatechange事件导致图片加载死循环、不断闪烁的问题。
事情是这样的,今天在写一个利用Ajax技术的查询网页,调用了XMLHTTP.onreadystatechange,但是在修改了图片控件的属性之后(setAttribute("src"。。。),如果图片链接不存在,图片显示框就会不断闪烁,浏览器Console一直弹出错误,不会中断,挂起一段时候浏览器还崩溃了,一开始我也不清楚什么原因,各种百度搜狗,开始尝试了图片资源判断各种函数还是不行。
后面我仔细检查了代码,理清逻辑之后,才明白这是由于图片加载事件也会引起网页状态改变,如果图片加载失败,readyState就永远达到判断条件,图片属性的修改是在onreadystatechange事件里的,这就导致一直死循环下去(如果图片资源存在就不会出现问题)。后面我通过添加是否已加载过的全局变量解决了这个问题。
假如这个变量叫 Reloaded 在点击查询后,Reloaded重置为0,然后在Ajax过程的最后修改为1,再在onreadystatechange事件的前面判断这个变量,如果为1则直接跳出(return),就完美解决了:
//首先在代码前面加全局变量:
var Reloaded;
//Ajax的主过程中加入判断(其他代码省略):
function stateChanged() {
if(Reloaded){
return;
}
if (xmlHttp.readyState === 4 || xmlHttp.readyState === "complete")
{
。。。。。
//在过程的最后修改变量即可
document.getElementById("CAAC").innerHTML = ResultArr2[15];
document.getElementById("CAACType").innerHTML = ResultArr2[16];
document.getElementById("SecPro").innerHTML = ResultArr2[17];
document.getElementById("Experience").innerHTML = ResultArr2[18]; document.getElementById("photo").setAttribute("src","http://"+ID+".jpg");
Reloaded = 1;
//触发查询时重置变量:
function query(){
var querystr;
var inputbox;
Reloaded = 0;
inputbox=document.getElementById("querystr");