JQuery ready бесконечный цикл

Question

Я пытаюсь предварительно загрузить изображения, и как только они будут полностью загружены, они будут постепенно исчезать (используя JQuery). При загрузке отображается небольшая анимация загрузки. Для этого я попытался создать невидимый тег изображения и позволить им загружаться там. Как только они закончили загрузку, я попытался установить исходный оригинал img-тега на оригинал.

Однако я не нашел свою ошибку в течение нескольких часов и не имею понятия. Кажется, что он заканчивается бесконечным циклом, а затем снова и снова создает «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++) { 
    ....