使用javascript围绕循环编写html

Question

我正在使用这个旧脚本中的 javascript：JavaScript: how to load all images in a folder?

但是，我想使用同一个 javascript 文件在循环之前和循环之后编写一些 html 代码，所有这些都使用同一个 javascript 文件。

在javascript中只在它之前和之后放置一个document.write是行不通的。

var bCheckEnabled = true;
var bFinishCheck = false;

var img;
var imgArray = new Array();
var i = 0;

var myInterval = setInterval(loadImage, 1);

function loadImage() {

    if (bFinishCheck) {
        clearInterval(myInterval);
        document.write('Loaded ' + i + ' image(s)');
        return;
    }

    if (bCheckEnabled) {

        bCheckEnabled = false;

        img = new Image();
        img.onload = fExists;
        img.onerror = fDoesntExist;
        img.src = 'assets/' + i + '.png';
        document.write('<img src="assets/' + i + '.png" width="1016" height="813" alt="Kar" />');

    }

}

function fExists() {
    imgArray.push(img);
    i++;
    bCheckEnabled = true;
}

function fDoesntExist() {
    bFinishCheck = true;
}

Answer 1

您可能错误地使用了此示例代码。它的意图似乎是在后台预加载图像 files，而不是在 HTML 中向用户显示它们（目前）。这是为了提高页面的明显下载速度。

简而言之，这段代码实际上并没有将图像渲染到 DOM 中；这是故意的行为。