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

我有一个类似于这个的画廊。一切都很好，但当我加载页面时，它会得到大量的加载时间。在缩略图和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>

我希望只有在用类thumb单击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>

---

为每个图像指定一个id，并将其src设置为一个小的1x1 dummy.gif：

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

---

如果你能发布你的代码和HTML，那么回复就会容易得多。完成：）你能帮我吗？修改你的代码，使其符合我的需要：）谢谢你的帮助！

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

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