Question

可能重复：
JavaScript Preloading Images

我正在使用JS在页面加载后的某个时间设置img.hidden = false。这导致图像下载并调整img元素的大小 - 我想避免（我使用内联样式宽度：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准备好/加载时执行。否则，代码执行时不存在

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

2 个答案: