Javascript Mirror html对象

Question

基本上，我有带变量的html

html = `<div>${product.id}<img src="${product.src}"/></div>`

然后，我简单地用以下命令更新dom

document.querySelector('.container').innerHTML = html;

到目前为止一切都很好，问题是html包含图像，每次我更新时，页面都会闪烁，我在想是否有一种更无干扰的方法来只更新更改的值。

Answer 1

在附加到DOM时隐藏图像，然后在图像完成加载时切换可见性。https://jsfiddle.net/ftpd9sxz/

function showImage() {
    this.style.visibility = 'visible';
}
let product = {
    id: 2,
    src: "https://pbs.twimg.com/profile_images/1010263656456744960/bXOUw0hb_bigger.jpg"
}
let html = `<div>${product.id}<img src="${product.src}" style="visibility: hidden" /></div>`;

document.querySelector('.container').innerHTML = html;
document.querySelector('.container img').addEventListener("load", showImage);