Javascript 当DOM完成绘制新元素时，最简单的警报方式是什么？

我只想禁用某些按钮并显示加载微调器，直到加载图像。 这是一个类似的问题- 我是javascript新手，对为什么没有简单的方法来确定这一点感到困惑！类似的东西-

document.addEventListener('readystatechange', event => {
   if (event.target.readyState === 'complete') {
    alert('complete');
  }
});

不幸的是，经过多次搜索，我似乎需要使用回调或承诺。我想现在是学习promises/async/await的好时机。我在尝试使用承诺重写函数时遇到困难

$('#container').on('click', '#imgSearch', function (e) {
$(this).html(`
  <i class="fa fa-spinner fa-spin"></i>Loading`);
//various if statements here to check radio buttons
showImgs(search, sort, phpController, limit);
}



    function showImgs(search, sort, phpController, limit) {
            imgArray = [];
            var a1 = $.post(phpController, {search: search, sort: sort, limit: limit}, {dataType: 'json'});
            $.when(a1).done(function (response) {
                if (response['error']) {
                    alert(response.error.img);
                } else {
                    var imgs = response;
                    if (Array.isArray(imgs)) {
                        for (let i = 0; i < imgs.length; i++) {
//I use setTimeout here to render one image per second
                            setTimeout(function () {
                                offset++;
                                saveImages(imgs[i]);
//calling alertFinished on last img is my temporary solution to removing spinner after render
                                if (i === imgs.length - 1) {
                                        alertFinished();
                                }
                            }, 1000 * i);
                        }
                    } else {
                        saveImages(imgs);
                    }
                }
            });
        }
        ;

displayImages在添加类等时渲染图像-

function displayImages(imgs) {
    var counter = 0;
    imgs.forEach(img => {
        var html = '';
        html += `<div class="" id='${img.id}'><img src=${img.image}></div>`;
        $(html).hide().appendTo(imgSection).fadeIn(1000);
    });
}
;

---

有人能解释一下在这种情况下我如何使用promises/async/await吗？不幸的是，没有一种方法可以使用与readystatechange类似的事件侦听器，因为另一种方法是重构DOM中呈现新元素的每个函数，以便禁用按钮，显示微调器等。显示微调器/加载消息是如此广泛的功能，我感到惊讶的是，我很难适当地实现它

首先，从你链接到的问题（以及其中的评论）中可以看出，没有一个很好的方法来判断一幅图像是何时绘制的。所以我将重点介绍一种在加载图像后调用函数的方法

对于初学者来说，如果你的页面在第一次加载时就有一堆图像，而你只是想等待它们加载后再做一些事情，那么你可以尝试使用超级简单的方法，这将是最简单的方法

但我得到的印象是，你有一种情况，你在动态添加图像，并希望在加载后做一些事情，所以这是行不通的。不过，我觉得你把事情搞得太复杂了。快速查看您的函数可以看出，您正在循环中调用

saveImages

和

displayImages

，即使它们似乎是您在添加图像后只想执行一次的操作

假设在整个过程中的某个时刻，你会发现一堆图像已经被添加到DOM中，至少其中一些还在加载中，你需要做的是检查最后一个要加载的图像，然后再删除你的加载旋转器。 这里的诀窍是找出最后加载的图像。它不一定是您添加的最后一个，因为前面添加的图像可能会更大

您可以使用一种方法跳过整个promise/async混淆，即使用递归函数，该函数经常检查是否加载了所有图像，如果没有，则等待一段时间，然后再次检查。如果在函数再次调用之前让等待时间相对较短，那么这可能会对您很好

大致如下：

const registeredImages = [];

// add your images    
for (let i = 0, l = someImages.length; i < l; i += 1) {
  doSomething(); // add someImages[i] to DOM where you want it
  someImages[i].setAttribute('data-id', `image-${i}`); // or whatever way to keep track of it
  someImages[i].addEventListener('load', register);
}
// remove spinner once they're loaded
tryToRemoveSpinner();

function register(event) {
  images.push(event.target.getAttribute('data-id');
}

function tryToRemoveSpinner {
  if (registeredImages.length === someImages.length) {
    removeSpinner(); // or whatever
  } else {
    setTimeout(() => { tryToRemoveSpinner() }, 100);
  }
}

const registeredImages=[]；
//添加您的图像
for（设i=0，l=someImages.length；i{tryToRemoveSpinner（）}，100）；
}
}

您可以在此处添加的一个增强功能是在

tryToRemoveSpinner

上放置某种计数器，因此，如果某个图像由于任何原因无法加载，它最终将退出或运行

removeSpinner（）

，或者在发生错误时执行任何操作，以防万一

---

---

相关阅读：

因此，首先，正如您从链接到的问题（以及其中的评论）中所看到的，没有很好的方法来判断何时实际绘制了图像。因此，我将重点介绍一种在加载图像后调用某个函数的方法

对于初学者来说，如果你的页面在第一次加载时就有一堆图像，而你只是想等待它们加载后再做一些事情，那么你可以尝试使用超级简单的方法，这将是最简单的方法

但我得到的印象是，您在动态添加图像，并希望在加载图像后执行某些操作，因此这不起作用。不过，我认为，您的操作过于复杂。快速查看您的函数可以看出，您正在循环中调用

saveImages

和

displayImages

，即使它们看起来很简单添加完图像后，您只想做一次

假设在整个过程中的某个时刻，你会发现一堆图像已经被添加到DOM中，至少其中一些还在加载中，你需要做的是检查最后一个要加载的图像，然后再删除你的加载旋转器。 这里的诀窍是找出最后加载的图像。它不一定是您添加的最后一个图像，因为前面添加的图像可能会更大

您可以使用一种方法跳过整个promise/async混淆，即使用一个递归函数，该函数经常检查是否加载了所有映像，如果没有，则等待一段时间，然后再次检查。如果在函数再次调用自身之前使等待时间相对较短，则这可能对您很好

大致如下：

const registeredImages = [];

// add your images    
for (let i = 0, l = someImages.length; i < l; i += 1) {
  doSomething(); // add someImages[i] to DOM where you want it
  someImages[i].setAttribute('data-id', `image-${i}`); // or whatever way to keep track of it
  someImages[i].addEventListener('load', register);
}
// remove spinner once they're loaded
tryToRemoveSpinner();

function register(event) {
  images.push(event.target.getAttribute('data-id');
}

function tryToRemoveSpinner {
  if (registeredImages.length === someImages.length) {
    removeSpinner(); // or whatever
  } else {
    setTimeout(() => { tryToRemoveSpinner() }, 100);
  }
}

const registeredImages=[]；
//添加您的图像
for（设i=0，l=someImages.length；iwindow.addEventListener('load', (event) => {
  // do stuff
});

const registeredImages = [];

// add your images    
for (let i = 0, l = someImages.length; i < l; i += 1) {
  doSomething(); // add someImages[i] to DOM where you want it
  someImages[i].setAttribute('data-id', `image-${i}`); // or whatever way to keep track of it
  someImages[i].addEventListener('load', register);
}
// remove spinner once they're loaded
tryToRemoveSpinner();

function register(event) {
  images.push(event.target.getAttribute('data-id');
}

function tryToRemoveSpinner {
  if (registeredImages.length === someImages.length) {
    removeSpinner(); // or whatever
  } else {
    setTimeout(() => { tryToRemoveSpinner() }, 100);
  }
}