【问题标题】:HTML Image Rollover - Image isn't fully loaded before rollover?HTML 图像翻转 - 图像在翻转之前未完全加载?
【发布时间】:2014-01-07 02:10:15
【问题描述】:

我有一张图片(在左上角作为主页链接),我使用 CSS :hover 在鼠标悬停时更改图片。

问题是,图像在我第一次翻转时加载需要一些时间。有一个临时空白空间,您会看到图像逐渐加载。这需要大约一秒钟,但很烦人。

我该如何解决这个问题,以便无缝翻转?有没有办法预加载图片?

【问题讨论】:

标签: javascript html browser rollover


【解决方案1】:

我能想到两个选项,副手:

  1. css 图像精灵,或
  2. :hover 图像放置在页面其他位置的隐藏div 中。

1、精灵:

对于CSS Sprite,为“主页”链接设置一张背景图片,然后简单地更改其在:hover 上的位置:

#home {
    background-image: url(http://example.com/spriteOne.png);
    background-repeat: no-repeat;
    background-position: 0 100px;
}

#home:hover {
    background-position: 0 200px;
}

不过,这确实需要为具有 css-sprite 背景的元素设置高度。


2、隐藏的预加载元素:

#home {
    background-image: url(http://example.com/bg.png);
    background-repeat: no-repeat;
    background-position: 0 100px;
}
#home:hover {
    background-image: url(http://example.com/hoverBg.png);
}
#preload,
#preload img {
    display: none;
}

<div id="preload">
    <img src="http://example.com/hoverBg.png" />
</div>

【讨论】:

  • 我认为 CSS sprites 绝对是要走的路
  • @James,我倾向于同意;本质上,它比将大量图像硬编码到每页缓存系统中要干净得多。另一方面,事先知道每个元素允许到底有多大的要求可能会受到限制(当然也限制了流动布局的范围,尽管我认为常识也是如此)。
  • 虽然这是一个非常有趣的解决方案,但我想知道为什么没有人建议 JavaScript...只是说...哈哈
  • @JCOC611:我自己的解释是因为我觉得使用 JS 不必要地使事情复杂化,另外:我不是 那个 擅长 vanilla JS... =/
  • 使用精灵。它减少了所需的 http 请求数量,在您尝试通过小管道查看页面之前,这听起来可能没什么大不了的。
【解决方案2】:

1.答案: 使用CSS Sprites

2。答案: 或者创建类似这样的东西:

<a href="link.html">

<!-- Remove this img-tag if you don't have a 'nohover' background -->
<img alt="image" src="images/image.png" class="nohover" />

<img alt="imagehover" src="images/image.png" class="hover" />

</a>

还有 CSS:

img.nohover {

边框:0

}

img.hover {

边框:0;

显示:无

}

a:hover img.hover {

显示:内联

}

a:hover img.nohover {

显示:无

}

【讨论】:

    【解决方案3】:

    我发现一个非常适合翻转的方法是使用 CSS sprites,即使用包含图像的原始版本和翻转版本的图像。这样,两个版本同时加载,在它们之间进行更改只需更改 background-position 样式即可。

    【讨论】:

      【解决方案4】:

      一种方法是在您的页面上添加一个不可见的图像,并使用相同的 URL。因此,通过将以下内容添加到文档正文的开头,您实际上是在指示浏览器尽快加载此图像。

      <IMG src="rolloverImage.png" style="display:none">
      

      虽然此标签仍然是您文档的一部分,但由于“display:none”设置,它不会显示甚至呈现。您甚至可以监听它的加载事件,并在加载后从 DOM 中完全删除标签,以将“垃圾”排除在文档之外。一张图片加载到内存后,每次引用同一个 URL 时都会自动重用,所以一旦将另一张图片的来源设置为同一个 URL,就会从内存中加载。

      希望对您有所帮助, 科比

      【讨论】:

        【解决方案5】:

        将图像放在样式设置为{ height: 0; overflow: hidden; } 的 div 中,这将使浏览器预加载图像。

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 1970-01-01
          • 2011-08-02
          • 2012-01-14
          • 2013-07-01
          • 2015-05-08
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          相关资源
          最近更新 更多