ポップアップイメージのCSSのリンクをホバリング

Question

私は動的にPHPで生成しているポップアップイメージのホバー効果を作成するには、次のテクニック http://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/ を使用しようとしています。このテクニックには、ページが読み込まれるたびにすべての単一イメージがダウンロードされるという問題が1つあります。ホバリングで画像をダウンロードするにはどうすればよいですか？ ページが読み込まれると（左：-1000px;）、cssは画像を画面外に押して、ホバー上のビューに戻します。これを達成するためにCSSを使用することは可能ですか？

Answer 1

はjQueryのを使用して画像を読み込みレイジーを見てみましょう：http://www.webresourcesdepot.com/lazy-loading-of-images-resources-you-need/

Answer 2

代わりのリンクにのimg src属性を設定：ここではhttp://www.appelsiini.net/projects/lazyload

は、他のいくつかのオプションがあります。そのリンクで属性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>