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

本文介绍了一种解决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");


 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值