如何通過使用innerHMTL（不帶有appendChild）將JS Image（）中創建的內容插入HTML？

Question

我有一個預加載的圖像數組：

image = new Image();
image.onload = myOnLoadFunc;
image.src = 'images/myicon.png';
myImages.push(image);

我想在頁面上顯示它們。

我正在做這樣的事情：

for (i = 0, len = myImages.length; i < len; ++i) {
    html += '<li><img src="'+myImages[i].src+'"></li>';
}
// ...
myElement.innerHTML = html;

除了第二次重新下載圖像外，它都有效。

我知道我可以做myElement.appendChild(...) ，但是我需要知道是否可以使用innerHTML “方法”。

---

我的問題是，如果瀏覽器在innerHTML之后解析'<img src='+image.src+'>' ，它將無法理解它已經在內存中包含該image了。

我想避免appendChild因為在圖像數組的情況下，它會多次與DOM混淆。

Answer 1

問題在於圖像的預加載尚未完成。

定期檢查圖像的完整屬性。

當complete變為true時，運行您的for循環。

更新代碼：

function insertMyImages() {
    for (i = 0, len = myImages.length; i < len; ++i) {
        if ( !myImages[i].complete ) {
            setTimeout(function(){insertMyImages();},100);
            return;
        }
    }
    for (i = 0, len = myImages.length; i < len; ++i) {
        html += '<li><img src="'+myImages[i].src+'"></li>';
    }
    // ...
    myElement.innerHTML = html;
}

setTimeout(function(){insertMyImages();},100);