Javascript:图像对象 - > HTML图像元素

Question

Javascript:图像对象 - > HTML图像元素

代码将图像预加载到图像对象中,然后(假设)将其设置为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>

Run Code Online (Sandbox Code Playgroud)

为什么它不起作用？

Answer 1

Cil*_*lan 6

尝试

<!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>

Run Code Online (Sandbox Code Playgroud)

您无法将src设置为图像,您必须将其设置为图像的src.(PS:最后添加分号并更改.src = oImage为.src = oImage.src)

DEMO

浏览器通常在加载一次后在本地保存所有已加载的图像,以防止每次在网站中加载页面时重新加载图像.使用JavaScript预加载图像只会将图像添加到该本地目录.您的浏览器应该完成其余的工作此外,在会话期间,您的JavaScript图像将加载到浏览器缓存中. (2认同)

归档时间：	12 年，8 月前
查看次数：	8410 次
最近记录：	12 年，8 月前