Javascript：图像对象 -> HTML 图像元素答案

【问题标题】：Javascript: image object -> HTML image elementJavascript：图像对象 -> HTML 图像元素
【发布时间】：2014-01-07 00:39:25
【问题描述】：

代码将图像预加载到图像对象中，然后（应该）将其设置为 HTML 上的图像元素 src：

<!DOCTYPE html>
<html>
  <head>
    <script language="javascript">
        window.onload = function () {
            var oImage = new Image();
            oImage.onload = function () {
                document.getElementById('myImage').src = oImage;
                alert('done');
            };
            oImage.src = 'image1.jpg';
        }
    </script>
  </head>
  <body>
    <img id="myImage" src="" />
  </body>
</html>

为什么它不起作用？

【问题讨论】：

您的“image1.jpg”在哪里？它与您的 HTML 文件在同一个文件夹中吗？
是的。我在本地测试。

标签： javascript html

【解决方案1】：

试试

<!DOCTYPE html>
<html>

<head>

    <script language="javascript">
        window.onload = function () {

            var oImage = new Image();

            oImage.onload = function () {
                document.getElementById('myImage').src = oImage.src;
                alert('done');

            };

            oImage.src = 'image1.jpg';
        };
    </script>

</head>

<body>
    <img id="myImage" src="" />
</body>

</html>

不能为图片设置src，必须设置为图片的src（PS：末尾加分号，改@987654325 @到.src = oImage.src)

DEMO

【讨论】：

是的，这就是解决方案。我刚刚在我的小提琴中发现了这一点：jsfiddle.net/Y2nPc/2
嗯，它有效。但是使用 .src 不会再次加载图像吗？我的意思是，它和document.getElementById('myImage').src='image1.jpg'不一样吗？目的是提前加载一堆图片。（预加载）
浏览器通常在加载一次后将所有加载的图像保存在本地，以防止每次在网站内加载页面时重新加载图像。使用 JavaScript 预加载图像只是将图像添加到该本地目录。您的浏览器应该完成其余的工作。在会话期间，您的 JavaScript 图像也会加载到浏览器缓存中。
大声笑，我的小提琴错了；它被包裹在window.onload 中。使用这个：jsfiddle.net/xPHyb/1
@MarvinBrouwer ，以我为例......这里的所有浏览器都设置为在磁盘上存储 0 缓存。但我认为浏览器无论如何都会将其预加载到 RAM 中......