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?
ps. I use the href value to assign the image slider div, then use .toggle() to change the slider # for each thumbnail.
Update
<div 开发者_JAVA百科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 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>
give an id to each of your images and set their src to a small 1x1 dummy.gif:
<img id="image1" src="dummy.gif" alt="Css Template Preview" width="940" height="529"/>
add onclick attribute to your thumb div:
<div class="thumb" id="dubstep-thumb" onclick="loadImage( 1 )">
define loadImage() in your <head> like this:
function loadImage( id ) {
var image = document.getElementById( 'image'+id );
image.setAttribute( 'src', 'gallery/dubstep-'+id+'.jpg' );
}
![Interactive visualization of a graph in python [closed]](https://www.devze.com/res/2023/04-10/09/92d32fe8c0d22fb96bd6f6e8b7d1f457.gif)
加载中,请稍侯......
精彩评论