Javascript JQuery就绪无限循环

我正在尝试预加载图像，一旦它们完全加载，它们就会平滑地淡入（使用JQuery）。加载时，将显示一个小的加载动画。为此，我尝试创建一个不可见的图像标签，并让它们加载到那里。一旦他们完成加载，我就试图将原始img标签的源设置回原始

但是我已经好几个小时没有发现我的错误了，也没有任何线索。它似乎以无限循环结束，然后一次又一次地创建“预加载img标记”

我的HTML：

<img src="someimg.jpg" id="img2load" class="preload_img" style="max-width:400px; max-height:400px;">

我的JS：

$(document).ready(function() {

var objs = document.getElementsByClassName("preload_img");

for (var i = 0; i < objs.length; i++) {

    objs[i].setAttribute("restoreImgPath", objs[i].src);

    //create div for preloading
    var img = document.createElement("img");
    img.setAttribute("src", objs[i].src);
    img.setAttribute("style", "position:absolute; top:0px; left:0px; display:none;");
    img.setAttribute("preloadForId", objs[i].id);
    img.setAttribute("id", "preload_" + objs[i].id);
    document.body.appendChild(img);

    //display loading gif
    objs[i].setAttribute("src", "loading.gif");

   //restore image [... not yet implemented ...]

}
});

$（文档）.ready（函数（）{
var objs=document.getElementsByClassName（“preload_img”）；
对于（var i=0；i

---

提前谢谢。我对JS还不是很有经验，所以请耐心等待我0:-）

好吧，这看起来像是个问题：

document.body.appendChild(img);

您不断添加新图像。看起来你也在复制类名，所以

objs.length

不断变大，你的循环是无限的。改为这样做：

var starting_length = objs.length;
for (var i = 0; i < starting_length; i++) {
    ....

var start_length=objs.length；
对于（变量i=0；i<起始长度；i++）{
....

如果不打算使用jQuery，为什么要包括它？document.ready（），我稍后会用到它。你确定这段代码导致了问题吗？可能发生的一个地方是，如果你将相同的类名附加到要添加到循环中的元素上（你在这里没有这样做），因为

objs

是一个实时集合，当您再次添加具有相同类的项目时，它会得到更新。但是，为了安全起见，请执行

var i=0，l=objs.length；i

是，但是您可以始终使用jquery，您的脚本可以减少到5行代码。请随意发布任何“改进”。我非常感谢。是的，但是添加的图像没有

preload\u img

类，不是吗？所以

document.getElementsByClassName（“preload\u img”）

返回此类中所有元素的某种引用？或者为什么选择元素后长度会增加？感谢您的回答！是

文档。getElementsByClassName

创建一个实时列表，该列表将随dom更新