如何使用 JS 渲染预加载的图像答案

【问题标题】：How to render preloaded images using JS如何使用 JS 渲染预加载的图像
【发布时间】：2018-06-15 09:42:25
【问题描述】：

我被这个问题困住了，试图让它发挥作用已经痛苦了 2 周。

我已经能够在 HTML 页面加载时预加载图像，但我无法访问图像并且我收到以下错误：

http://localhost/taskB/html/html/members/[object%20HTMLImageElement] 404（未找到）[object%20HTMLImageElement]:1 GET

我的代码如下，预加载功能被标记为正确但我无法弄清楚如何访问图像数组：

function preloaded() {
    var itemDesc = setDesc();
    var preload = new Array();
    var loadedimages = new Array();
    var countPreload = 0;
    for (var r = 1; r <= 4; r++) {
        for (var c = 1; c <= 5; c++) {
            preload[countPreload] = "../../images/slices/" + itemDesc + "/" + itemDesc + "_r" + r + "_c" + c + ".jpg";
            countPreload++;
        }
    }
    for (var i = 0; i<preload.length; i++){
        loadedimages[i] = new Image();
        loadedimages[i].src = preload[i];
    }
}

function buildImageHTML() {
    var itemDesc = setDesc(getUrlVars()["description"]);
    var countFile = 0
    var file = new Array();
    // START REDO the images for access
    var preload = new Array();
    var loadedimages = new Array();
    var countPreload = 0;    
    for (var r = 1; r <= 4; r++) {
        for (var c = 1; c <= 5; c++) {
            preload[countPreload] = "../../images/slices/" + itemDesc + "/" + itemDesc + "_r" + r + "_c" + c + ".jpg";
            countPreload++;
        }
    }
    for (var i = 0; i<preload.length; i++) {
        loadedimages[i] = new Image();
        loadedimages[i].src = preload[i];
    }
    //END REDO the images for access
    var writeThis = "";
    writeThis += "<table>";

    //Build Rows then columns
    for (var x = 1; x <= 4; x++) {
        writeThis += "<tr>";
        //Loop through and add five <td> cells to hold the image slices
        for (var y = 1; y <= 5; y++) {
            file = loadedimages[countFile];
            writeThis += "<td><img src=\"" + file + "\"></td>";
            countFile++;
        }
        writeThis += "</tr>";
    }
    writeThis += "</table>";
    var divImageObj = document.getElementById('divImageObject');
    divImageObj.style.display = 'block';
    divImageObj.innerHTML = writeThis;
}

我还有一个函数叫start()：

function start() {
    preloaded();
}

我通过onload 事件调用start 函数，如下所示：

<body onload="start();">

一个要求是我必须使用innerHtml 来渲染图像。

这里的任何指针都会很棒。

【问题讨论】：

很明显，在您粘贴的代码中的某处，错误的文本附加到了 URL，这就是为什么您会看到 .../members/[object%20HTMLImageElement]，这是错误的对象到字符串转换的明确迹象，而且绝对是不是你所期望的。另外，你的代码 sn-p 搞砸了，请多加努力确保它在语法上是有效的 JavaScript——我很确定你那里有重复的代码块，而且你的括号不匹配，我无法修复它在不知道您拥有的原始代码是什么的情况下为您服务。
我已将您的 sn-p 纠正到最佳状态，您可以查看一下，看看它现在看起来是否与您页面中的实际情况一样。

标签： javascript html image innerhtml preload

【解决方案1】：

loadedimages 是 图像对象的数组。请改用loadedimages[countFile].scr。

file = loadedimages[countFile].src;

最好从 HTML 头部调用 preloaded()。 onload 事件在渲染所有页面之后触发。

<html>
<head>
...
<script>
preloaded();
</script>
</head>
<body>
...

【讨论】：

提出了使用 .src 建议并能够减少代码的解决方案。脚本在头部，它抛出了 Uncaught TypeError: Cannot read property 'style' of null 所以我一直在我的 start 函数中调用它以使其工作。我目前认为 onload 调用在 DOM 加载后开始，并且这就是为什么要定位一个 div 但如果我将它加载到头部则没有 DOM 加载“DivImage”可以访问，因此会引发 NULL 错误。总是很高兴听到我错了.. JS 不是强项，JS 也从来不是我的强项。谢谢@Alex S 和 amn
这个错误可能是在 DOM 加载之前调用函数 buildImageHTML 引起的。这是我如何测试它的工作示例 - jsfiddle.net/6t94qs2f/12