javascript - 如何在图库图像上添加点击事件侦听器，当它们延迟加载时？

Question

我正在使用灯光图库 JS 的内联图库，并尝试在图库的图像上添加点击事件侦听器。为此，我正在使用这个事件 - lgAfterOpen。

我无法获取所有图像标签，因为图像是延迟加载的，使用此lgAfterOpen事件，直到那时我只在 DOM 中加载第一张图像。我应该如何保持延迟加载并能够将事件侦听器放在画廊的所有图像上？

我正在尝试的代码示例：

lgContainer.addEventListener('lgAfterOpen', function(e){
  let images = document.getElementsByClassName('lg-object lg-image'); // expecting to return all images
  for (image of images) image.addEventListener('click', function() { /* code here */ }) // geting only first image here. 
})

Answer 1

最后，我通过将事件侦听器添加到图像的父 div 来解决这个问题 - 即 div .lg-item，因为我可以在加载图像之前为 DOM 中的所有图像找到它们。我希望这对某人有帮助。