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

I have a gallery similar to this one JulienPons . Everything works fine but when I load the page, it gets massive loading times. The fullscreen images load before the thumbnails and div elements. How can I make the images and videos load only after the thumbnail is clicked?

我有一个类似于这个JulienPons的画廊。一切正常，但是当我加载页面时，它会加载大量的加载时间。全屏图像在缩略图和div元素之前加载。如何在单击缩略图后才能加载图像和视频？

ps. I use the href value to assign the image slider div, then use .toggle() to change the slider # for each thumbnail.

PS。我使用href值来指定图像滑块div，然后使用.toggle（）来更改每个缩略图的滑块＃。

Update

更新

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

I want these images to load only after I click the div with the class thumb. The way they are now, they load with the document, making the loading times really big.

我希望这些图像只有在我用类拇指点击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>

1 个解决方案

#1

give an id to each of your images and set their src to a small 1x1 dummy.gif:

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

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

add onclick attribute to your thumb div:

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

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

define loadImage() in your <head> like this:

在中定义loadImage（），如下所示：

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

#1