Javascript - 加载类的所有元素时的事件侦听器

Posted 2023-02-22

【中文标题】Javascript - 加载类的所有元素时的事件侦听器

【英文标题】：Javascript - Event listener for when all elements of class are loaded

【发布时间】：2021-06-11 01:40:37

【问题描述】：

在 javascript 中是否有一种方法可以在类型/类/标签等的每个元素都被加载后执行代码？

类似：

document.getElementsByClassName("test").addEventListener("onload", ()=>  executeStuffHere(); );

如果没有，是否有类似的方法可以对图像执行此操作？ （加载所有图像后执行代码）

【问题讨论】：

使用.addEventListener("load"

和DOMContentLoaded

这应该有助于***.com/questions/799981/…

【参考方案1】：

你需要一个循环。您可以计算图像的数量，然后在每次加载图像时递减。在回调中，当计数为 0 时调用最终函数。

const images = document.getElementsByClassName("test");
let imagesLeft = images.length;
for (const image of images) 
  image.addEventListener('load', () => 
    imagesLeft--;
    if (imagesLeft === 0) executeStuffHere();
  );

请注意，.addEventListener("onload" 将不起作用。您必须使用load。

如果您希望executeStuffHere 在一切完成后运行，您也可以添加错误侦听器，即使出现一些错误。

如果可能已经加载了某些图像，请先check if they're .complete，然后再添加侦听器（如果是，则减少）。

【讨论】：

嗨！只是一个简单的问题，这也适用于其他元素吗？我意识到我没有图像，我有divs 和background-images。到目前为止，我对这种方法没有运气，但我认为这不是你的代码的问题，也许只是我使用它的方式

查看***.com/q/5057990 唯一的选项似乎是在图像上使用src，然后在图像加载后在<div> 上更改为background-image

【参考方案2】：

首先您等待DOMContentLoaded 或确保document.readyState 是interactive 或loaded，然后选择符合您所需条件的所有节点，遍历它们并执行代码。方法document.querySelectorAll()返回一个NodeList，你可以coerce into an array

这里要注意的主要事情是您不是在等待每个节点加载。您正在等待整个文档加载完毕，然后遍历 DOM 树。

const fireOnAllYeses = () => 

  Array.from(document.querySelectorAll('.yes')).forEach(domNode => 
    
    //  execute code here
    console.log( domNode.innerText );
    
  );
;


document.addEventListener('DOMContentLoaded', fireOnAllYeses);

<main>
   <div class="yes">I am yes 1</div>
   <div class="no">I am no 1</div>
   <div class="yes">I am yes 2</div>
   <div>I am some div</div>
</main>