Question

我有一个类似于这个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>

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

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

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

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

1 个答案: