图片库加载帮助/触发后如何动态加载图像？

Question

我有一个与此类似的画廊 JulienPons 。一切正常，但当我加载页面时，加载时间会很长。全屏图像在缩略图和 div 元素之前加载。如何使图像和视频仅在单击缩略图后加载？

附：我使用 href 值来分配图像滑块 div，然后使用 .toggle() 更改每个缩略图的滑块 #。

更新

    <div id="featured">

            <!-- PROJECT START --><div id="dubstep" class="project">
            <ul>                
<li class="img1"><img src="gallery/dubstep-1.jpg" alt="Css Template Preview" width="940" height="529"/></li>
<li class="img2"><img src="gallery/dubstep-2.jpg" alt="Css Template Preview" width="940" height="529"/></li>        
<li class="img3"><img src="gallery/dubstep-1.jpg" alt="Css Template Preview" width="940" height="529"/></li>
<li class="iframe"><img src="gallery/dubstep-1.jpg" alt="Css Template Preview" width="940" height="529"/></li>
            </ul>
           </div><!-- PROJECT END -->
    </div>

我希望这些图像仅在我单击带有类拇指的 div 后加载。他们现在的方式是加载文档，导致加载时间非常长。

    <div id="portfolio">
    <div id="thumbnails">

        <!--THUMBNAIL START --><div class="thumb" id="dubstep-thumb"><a href="#dubstep">
        <img src="thumbs/dubstep-bwthumb.jpg" alt="" width="300" height="169"/>
        </div><!--THUMBNAIL END -->

    </div>
    </div>

Answer 1

为每个图像提供一个 id，并将它们的 src 设置为一个小的 1x1 dummy.gif：

<img id="image1" src="dummy.gif" alt="Css Template Preview" width="940" height="529"/>

将 onclick 属性添加到您的拇指 div：

<div class="thumb" id="dubstep-thumb" onclick="loadImage( 1 )">

在 中定义 loadImage()，如下所示：

function loadImage( id ) {
    var image = document.getElementById( 'image'+id );
    image.setAttribute( 'src', 'gallery/dubstep-'+id+'.jpg' );
}