使用Javascript：图像对象 - > HTML图像元素

该代码预先加载的图像成图像对象，然后（假定）将其设置为图像元素的src上HTML：使用Javascript：图像对象 - > HTML图像元素

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

为什么它不工作？

来源

2014-01-06 Azevedo

哪里是你的 'image1.jpg' 在什么位置？它与HTML文件在同一个文件夹中吗？ –

是的。我在本地测试它。 – Azevedo

尝试

<!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：在结尾加上分号，改变.src = oImage到.src = oImage.src）

DEMO

来源

2014-01-06 16:29:49 Cilan

是的，这是解决方案。我刚刚在我的小提琴中发现了这个：http://jsfiddle.net/Y2nPc/2/ –

嗯，它的工作原理。但使用**。src **不会再加载图像吗？我的意思是，它与document.getElementById（'myImage'）不同。src ='image1.jpg''？目的是提前加载一堆图像。（prelodaing） – Azevedo

浏览器通常会在加载一次后在本地保存所有加载的图像，以防止每次在网站中加载页面时重新加载图像。使用JavaScript预加载图像只是将图像添加到本地目录。你的浏览器应该完成剩下的工作同样在会话期间，您的JavaScript图像被加载到浏览器缓存中。 –

使用Javascript：图像对象 - > HTML图像元素

回答

相关问题