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

Question

可能重复：
JavaScript 预加载图像

我正在使用 JS 在页面加载后的某个时间设置 img.hidden=false 。这会导致图像下载并调整 img 元素的大小——我想避免这种情况（我使用内联样式 width:2em 来调整图像大小）。其次，当我更改 img 源时，第二张图片下载时会有一点延迟。

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

Answer 1

先下载图片然后触发动作，用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';

Answer 2

没有 jQuery（如果需要）：

var imageNode = new Image(); // or document.createElement('img');

imageNode.onload = function(e) {
    // Code for appending to the DOM
    document.getElementById('container').appendChild(this);
};

imageNode.src = 'path/to/image.jpg';

---

如果你的 img 标签已经存在，像这样：

<img id='myimg' alt=''>

在 JavaScript 中使用：

var imageNode = document.getElementById('myimg');

代替：

var imageNode = new Image();

请记住，代码需要在 img 标记之后或 DOM 准备好/加载时执行。否则代码执行时不存在