Question

我正在尝试预加载图像，一旦它们完全加载，它们就会顺利淡化（使用JQuery）。加载小型加载动画时显示。为此，我尝试创建一个不可见的图像标记，让它们加载到那里。一旦完成加载，我就试着将原始img-tag的源设置回原始版本。

但是我现在几个小时都没有发现我的错误，也没有任何线索。看起来它最终会在无限循环中结束，然后一次又一次地创建“preload-img-tags”。

我的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： - ）

Answer 1

嗯，这看起来像是问题：

document.body.appendChild(img);

您不断添加新图片。看起来你在某种程度上复制了类名，所以objs.length不断变大，你的循环是无限的。这样做：

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

JQuery准备无限循环

1 个答案: