Question

我正在尝试使用以下技术 http://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/ 创建一个弹出图像悬停效果，我用PHP动态生成。我对这种技术有一个问题，即在页面加载时下载每个图像。我怎么能让css只在悬停时下载图像。现在，当页面加载时，css正在将图像从屏幕上移开（左：-1000px;），然后在悬停时将它们带回到视图中。使用css可以实现这一点，那么我还有其他选择吗？

Answer 1

而不是将img src属性设置为链接。使用该链接设置属性data-src。当您悬停时，从data-src属性设置图像的src。浏览器将在那时加载它。

Answer 2

HTML Code Here

.gallerycontainer {
  position: relative;
}
.thumbnail img {
  border: 1px solid white;
  margin: 0 5px 5px 0;
}
.thumbnail:hover {
  background - color: transparent;
}
.thumbnail:hover img {
  border: 1px solid blue;
}
.thumbnail span {
  position: absolute;
  background - color: lightyellow;
  padding: 5px;
  left: -1000px;
  border: 1px dashed gray;
  visibility: hidden;
  color: black;
  text-decoration: none;
}
.thumbnail span img {
  border - width: 0;
  padding: 2px;
}
.thumbnail:hover span {
  visibility: visible;
  top: 0;
  left: 230px;
  z-index: 50;
}

<div class="gallerycontainer">
  <a href="#thumb" class="thumbnail">
    <img width="100px" border="0" height="66px" src="http://www.dynamicdrive.com/cssexamples/media/tree_thumb.jpg"><span><img src="http://www.dynamicdrive.com/cssexamples/media/tree.jpg"><br>Simply beautiful.</span>
  </a>
  <a href="#thumb" class="thumbnail">
    <img width="100px" border="0" height="66px" src="http://www.dynamicdrive.com/cssexamples/media/ocean_thumb.jpg"><span><img src="http://www.dynamicdrive.com/cssexamples/media/ocean.jpg"><br>So real, it's unreal. Or is it?</span>
  </a>
  <br>
</div>

Answer 3

使用jQuery查看Lazy加载图像：http://www.appelsiini.net/projects/lazyload

以下是其他一些选项：http://www.webresourcesdepot.com/lazy-loading-of-images-resources-you-need/

在悬停时弹出图像css链接

3 个答案: