1

我如何为悬停状态预加载图像以立即更改背景，而不是几秒钟后。即背景必须在用户悬停在特定元素上之前加载。

该网站可以在http://www.paradisoperduto.co.uk/查看

到目前为止，我对编码感到非常满意，所以想知道是否有一个相对简单的更改来实现它。非常感谢。

<!-- background change -->
 <script type="text/javascript">
      $(document).ready(function() {
        $('#hoverarea').hover(function() {
            $('body').addClass('hover');
        }, function(){
            $('body').removeClass('hover');
        });
      });
    </script>

        <!-- background change-->


    <div id="hoverarea"><a href="comingsoon.html"> <img src="images/blank.png" onmouseover="playSound('audio/apple2.mp3');"> </a></div>

body {
    background-image:url('../images/blackandwhite.gif');
    background-position:50% 20px; 
    background-attachment:fixed;
    background-repeat: no-repeat;
    background-color:black;
    height:714px;
    width:1024;
}

#hoverarea {
    position:absolute;
    width:400px;
    height:400px;
    top:300px;
    right:20px;
    z-index:2000; 
}



.hover {
    background-image:url('../images/colour.gif');

}


li a:hover + img {
    left: 0px;
}
4

2 回答 2

0

您可以在 javascript 中等待此图片 - 在我的网站上，我正在使用“缓存列表”包含图片的 url 在显示网站之前预加载 - 如果您将在 js 中创建新的 Image 元素并为其提供此图片的 src，当 onload 事件触发时 - 浏览器将缓存此图像，以便当它出现在任何其他地方时会立即显示。这是我网站上的代码，但我想它是如何工作的很清楚：

function cache(input, prefix, primary, cback){
  this.cback = cback
  this.tab=[];
  var tmp = input;
  var cur;
  for (var i = 0; i < tmp.length; i++)
  {
    if (tmp[i][0] == primary)
      cur = i;
  }
  if (cur != undefined)
  {
    this.size = tmp[cur][1].length;
    if (this.size == 0)
      this.cback();
    for (var i = 0; i < this.size; i++)
    {
      var img = document.createElement('img');
      img.src = prefix+tmp[cur][1][i];
      img.onload = this.imgReady.bind(this);
      img.onerror = this.imgError.bind(this);
      this.tab.push(img);
      console.log('caching:', img.src);
    }
    tmp.splice(cur, 1);
    return;
  }
  this.cback();
}

cache.prototype = {
  counter:0,
  size:0,
  tab:0,
  cback:function(){return;},
  imgReady:function(element){
    this.counter++;
    if (this.counter == this.size){
      storeCache(this.tab)
      this.cback(this.tab);
    }},
  imgError:function(){
    DEBUG.innerHTML+='[ERROR] cache error!<br>';
    console.log('cache error...');
    this.imgReady();}
}

和缓存列表看起来像：

[
  [
    'main',
    [
      '/pictures/party.png',
      '/pictures/icon.png',
      '/pictures/+1.png',
      '/pictures/splash.jpeg',
      '/pictures/logo_compact.png',
      '/pictures/dj.png',
      '/pictures/sign.png',
      '/textures/main.jpg',
      '/textures/shadow.png',
      '/textures/smallshadow.png',
      '/textures/outlineH.png',
      '/textures/outlineV.png',
      '/textures/bg.jpg',
      '/textures/alt.jpg'
    ]
  ],
  [
    'theme_selector',
    [
      '/../uni/p1.png',
      '/../uni/p1a.png',
      '/../uni/p2.png',
      '/../uni/p2a.png',
      '/../uni/p3.png',
      '/../uni/p3a.png',
    ]
  ],
  ...
]

实际上我为所有子站点使用一个缓存文件，这就是为什么缓存列表中有“主”或“主题选择器”标识符（它们作为前缀参数传递）

所以一般的想法是为每张重要图片创建图像元素并在所有图片都会触发 onload 事件（或 onerror）之后继续操作，因为那样它们将已经被浏览器缓存并立即显示在我们想要的任何地方

于 2013-10-02T19:37:45.777 回答
0

我相信你指的是大背景图片。问题是，由于页面上的元素太少，用户可能会在第二个预加载之前将鼠标悬停在图像上。毕竟，这是一个很大的图像。

您可以尝试的一件事是 CSS 精灵。那里的概念是将两张图像组合成一张高大的图像，因此它们都作为一张图像加载。然后，在您的 css 中，您执行以下操作：

#hoverarea {
  background-image: url('../images/backgroundimage.gif');
  background-position: center top;
}

#hoverarea:hover {
  background-position: center bottom;
}

这样，您所做的就是更改一个图像的 css 位置，而不是使用繁琐的 javascript 解决方案来预加载和注入第二个图像。

于 2013-10-02T19:22:35.707 回答