Question

我正在尝试做一些相对简单的事情 - 每当用户点击表单中的按钮，加载图像以及加载图像时，都会显示。在加载时，会出现“加载”图标。

我尝试了以下Javascript代码：

 <script>

 function loadImage()
 {
       myImage = new Image();

       myImage.onLoad = function()
      {
            document.img01 = myImage;
            alert("image loaded - debug msg");
      }

      myImage.src = "MyBigImage.cgi";

      document.img01.src = "loading.gif";
 }

 </script>

 <form method=get name=myForm id=myForm>

   <div id=img name=img>
   <img src=xx id=img01 name=img01>
   </div>

  <input type=button onClick='javascript:loadImage();'>
  </form>

不幸的是，它不起作用。我不知道为什么，但即使是警报也没有显示出来。我试着按照这里的说明进行操作：

http://fragged.org/preloading-images-using-javascript-the-right-way-and-without-frameworks_744.html

有什么想法吗？

Answer 1

我认为更好的方法是将图像稍后注入DOM中。当用户单击按钮时，我们创建图像，然后将其添加到DOM中。这是代码：

HTML：

<input type="button" value="show image" onClick='javascript:loadImage();' />
<div id="img" name="img"></div>

JavaScript的：

function loadImage() {
    var myImage = document.createElement('img');

    myImage.onload = function() {
        alert("image loaded - debug msg");
    };

    myImage.src = "MyBigImage.cgi";

    document.getElementById('img').appendChild(myImage);
}

最后，这是一个示例JSBin，向您展示它是如何工作的：http://jsbin.com/nepijabe/1/edit?html,js,output

如何在Javascript中加载图像？

1 个答案: