JQuery就绪的无限循环

JQuery ready infinite loop

本文关键字：无限循环 就绪 JQuery      更新时间：2023-09-26

我正在尝试预加载图像，一旦它们完全加载，它们就会平滑地淡入（使用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 ...]
}
});

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

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

document.body.appendChild(img);

您不断添加新图像。看起来你也在以某种方式复制类名，所以objs.length不断变大，你的循环是无限的。改为：

var starting_length = objs.length;
for (var i = 0; i < starting_length; i++) {
    ....
相关文章：