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＆＃34;方法＆＃34;是否可行。

我的问题是，如果浏览器在'<img src='+image.src+'>'之后解析innerHTML，它就不知道它已经在内存中有image。

我想避免使用appendChild，因为在图像数组的情况下，它会多次与DOM混淆。

Answer 1

问题是图像的预加载尚未完成。

定期检查图片的完整属性。

完成变为 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);

如何使用innerHMTL（不带appendChild）将JS Image（）中创建的内容插入到HTML中？

1 个答案: