javascript - Html/JavaScript 预加载图像

<分区>

我有一个带有一些 img 链接的页面。当图像处于 hover 状态时，我更改了页面内 div 的背景。 javascript 代码如下:

function hover(element) {
  if(element.id=="first"){
      element.setAttribute('src', './images/first_active_2.png');
      back.style.backgroundImage = 'url(./images/1.png)';
      text.src = './images/text_first_active.png';
  }
  if(element.id=="second"){
      element.setAttribute('src', './images/second_active_2.png');
      back.style.backgroundImage = 'url(./images/3.png)';
      text.src = './images/text_second_active.png';
  }
}

function unhover(element) {
  if(element.id=="first"){
    element.setAttribute('src', './images/first_inactive_2.png');
    text.src = './images/text_first_inactive.png';
  }
  if(element.id=="second"){
    element.setAttribute('src', './images/second_inactive_2.png');
    text.src = './images/text_second_inactive.png';
  }
}

和html代码:

<div id="back"/>
  <a>
    <img id="first" src="images/first_inactive_2.png" onmouseover="hover(this);" onmouseout="unhover(this);" />
  </a>
  <a>
    <img id="second" src="images/second_inactive_2.png" onmouseover="hover(this);" onmouseout="unhover(this);"/>
  </a>

一切都很好，但有时背景图像会闪烁。我想我必须预加载两个 images/1.png，images/2.png，但我不知道如何正确地进行。有没有正确的方法让图像不闪烁？

最佳答案

var img = new Image(); img.src = "/path/to/image.jpg";

这可能在某处的 window.load 或 dom:ready 事件中，这样您就可以预加载图像。

关于javascript - Html/JavaScript 预加载图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21109287/