彈出圖像css鏈接上懸停

Question

我想要使用以下技術 http://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/ 創建一個彈出式圖像懸停效果，我動態生成與PHP。這種技術有一個問題，即在頁面加載時下載每個圖像。我怎樣才能讓css只下載懸停的圖片？ 現在，當頁面加載時，css會將圖像從屏幕上推出（left：-1000px;）然後將它們帶回到懸停視圖中。是否可以用css來完成此操作，然後我還有其他選擇嗎？

Answer 1

看看懶加載使用jQuery您的圖像：http://www.appelsiini.net/projects/lazyload

這裏有一些其他的選擇：http://www.webresourcesdepot.com/lazy-loading-of-images-resources-you-need/

Answer 2

而不是設置在img src屬性的鏈接。使用該鏈接設置屬性data-src。當你懸停時從data-src屬性中設置圖像的src。瀏覽器會在那裏加載它。

Answer 3

HTML代碼這裏

.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>