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

【问题标题】：Image gallery loading help / How to load images on the fly, after triggered ?图片库加载帮助/触发后如何动态加载图片？
【发布时间】：2011-07-31 08:23:39
【问题描述】：

我有一个类似于JulienPons 的画廊。一切正常，但是当我加载页面时，加载时间很长。全屏图像在缩略图和 div 元素之前加载。如何让图片和视频只有在点击缩略图后才加载？

ps。我使用 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>

【问题讨论】：

如果您可以发布您的代码和 HTML，回复会容易得多。
完成 :) 你能帮帮我吗？

标签： jquery html ajax load gallery

【解决方案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 )">

像这样在<head> 中定义 loadImage()：

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

【讨论】：

修改了您的代码，使其符合我的需要 :) 感谢您的帮助！