js stateChanged 图片加载死循环的问题

最新推荐文章于 2023-01-20 21:04:25 发布

原创最新推荐文章于 2023-01-20 21:04:25 发布 · 591 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JS #JavaScript #Ajax #HTML

JS.基础应用专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种解决Ajax技术中因图片加载失败导致页面死循环的问题方法。通过引入全局变量来判断图片是否已加载，有效防止了因无效图片链接引起的页面闪烁及浏览器崩溃。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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");