javascript - HTML 隐藏图像 - 在显示之前如何下载并调整大小？

Question

这个问题已经有答案了:

已关闭 10 年前。

Possible Duplicate:
JavaScript Preloading Images

我在页面加载后一段时间使用 JS 设置 img.hidden=false 。这会导致图像下载并调整 img 元素的大小 - 我想避免这种情况(我使用内联样式 width:2em 来调整图像大小)。其次，当我更改 img 源时，第二个图像的下载会出现轻微的延迟。

如何在页面上显示图像之前下载它们...？

Answer 1

先下载图片，然后触发action，用jquery这样:

  var i = document.createElement('img'); // or new Image()
  // may be you need to set the element id...
  i.id = 'your id';
  // here handle on load event
  $(i).load(function() {

       // finally the new image is loaded, you can trigger your action
       $('#container').append($(this));

  });
  // This is the last step, set the url and start the image download.
  i.src = 'http://www.hostname.com/yourimage.jpg';