CODEWITHSUNDEEP
jqueryhtmlimage
Elgiz I
Elgiz I

Reputation: 57

How to load images dynamically or load only first image in my simple custom gallery?

In this image gallery, if there are a lot of images, browser is loading all of them. How to make browser load only frist images of each gallery, and load other images only if user clicks on pagination numbers? Here is my code:

 <div class="photPag">
 <ul class="previewPhoto">
    <li style="display:block;"><a href="/bigImage/1.jpg" data-rel="gallery1">
      <img src="/smallImage/1.jpg" height="200" width="150" alt="" /></a></li>
    <li><a href="/bigImage/2.jpg" data-rel="gallery1">
      <img src="/smallImage/2.jpg" height="200" width="150" alt="" /></a></li>
    <li><a href="/bigImage/3.jpg" data-rel="gallery1">
      <img src="/smallImage/3.jpg" height="200" width="150" alt="" /></a></li>
 </ul>
 <ul class="pages">
    <li class="active">1</li>
    <li>2</li>
    <li>3</li>                      
 </ul>
</div>

jQuery(".pages li").click (
      function(){
        if  (!jQuery(this).hasClass('active'))
        {
            var anker=jQuery(this).text() -1;
            jQuery(this).parent().find('li').removeClass('active');
            jQuery(this).addClass('active');
            jQuery(this).parent().prev().find('li').css('display','none');
            jQuery(this).parent().prev().find('li').eq(anker).css('display','block');
        }

});

Upvotes: 2

Views: 1014

Answers (1)

Kamil Szymański
Kamil Szymański

Reputation: 950

You need to read about lazy loading. Here's the simplest implementation possible:

lazyLoad = function() {
    var img = galleryContainer.find("img:visible");
    if (!img.data("shown")) {
        var dataSrc = img.data("src");
        img.attr("src", dataSrc);
        img.data("shown", true);
    }
}

And here's the working demo (really ugly one, but it's only for demonstration purposes). http://jsfiddle.net/qns1ap60/

In a nutshell: 1. Add some "loading" image as a "src" attribute of every image tag in gallery. 2. Store the real "src" in "data-src" attribute. 3. On image change invoke a lazyLoad function, that will add "data-src" attribute value to "src" one, what will force browser to load a real image.

I think, that you should think about some generic solution for this or even a well known and tested plugin, like Unveil

Upvotes: 1

Related Questions