javascript - 检测innerHTML更改后所有内容何时加载

Question

我使用此代码来更改 div 的内容

mydiv.innerHTML = "html code with text and images";

是否有一些事件可以用来在所有内容加载时收到通知？ (无论有没有图片还是有很多图片)

我想我可以遍历所有子元素并向它们添加事件监听器，但希望有其他方法。

Answer 1

也许是这样的，只是为了给你一个普通 JavaScript 的想法

var updateContent = function(element, content) {

    element.innerHTML = content;
    var images = element.querySelectorAll('img');
    var loadedItems = 0;
    var totalItems =  images.length;
    
    var loaded = function() {
        loadedItems++;
        
        console.log('loaded item: ' + loadedItems);

        if(loadedItems == totalItems) {
            element.classList.add('load-completed')
            console.log('finished loading all images');
        }
    };
    
    for(var i=0; i < totalItems; i++){
        if(images[i].complete) {
            loaded();
        } else {
          images[i].addEventListener('load', loaded);
          images[i].addEventListener('error', function() {
            console.log('error');
          });
        }
    }
}

updateContent(
     document.querySelector('.my-div'),
    '<h1>hello world<\h1><img src="https://picsum.photos/id/237/200/300"><img src="https://picsum.photos/id/1/200/300">'
);

.my-div {
   border:solid 5px orange;
}

.my-div img {
    width: 300px;
    height: 200px;
}

.load-completed {
    border: dashed 5px green;
}

<div class="my-div"></div>