Load image onClick with JQuery

Currently, all of the images are downloaded as soon as the page is opened. I’d like to make it so that the images are downloaded when the user clicks “load more” because this is more efficient and saves bandwidth.

I make some changes in your HTML and your JQuery. As a matter of act I add one more div img element and the I create an object to retrieve the src. So…HTML:

<div> <img src=""> </div>
<div> <img src=""> </div>
<div> <img src=""> </div>
<div> <img src=""> </div>
<div> <img src=""> </div>
<div> <img src=""> </div>
<div> <img src=""> </div>
<div> <img src=""> </div>
<div> <img src=""> </div>

<a href="#" id="loadMore">Load More</a>

Javascript:

var images={
  img1:"http://i.imgur.com/CmU3tnl.jpg",
  img2:"http://i.imgur.com/TDdxS9H.png",
  img3:"http://i.imgur.com/39rpmwB.jpg",
  img4:"http://i.imgur.com/1lBZQ1B.png",
  img5:"https://i.imgur.com/Y5Ld4Qfh.jpg",
  img6:"http://i.imgur.com/8HumESY.jpg",
  img7:"http://i.imgur.com/CqCZBvk.png",
  img8:"http://i.imgur.com/wQVPRVp.png"
};


$(function () {
    $("div").slice(0, 1).show();
    $("#loadMore").on('click', function (e) {
          
      e.preventDefault();
         
      
         $("div:hidden").slice(0, 1).slideDown(function(){
           var imgLoadedElem=$("img[src!='']");
          console.log(imgLoadedElem.length);
          console.log(Object.keys(images).length);
          var a=Object.keys(images).length;
          if(imgLoadedElem.length==0){
          $(this).children('img') .attr('src', "http://i.imgur.com/CmU3tnl.jpg");
            
          }      
          else
          {
            $(this).children('img').attr('src',Object.values(images)[imgLoadedElem.length]);
            
          }
          if((a-imgLoadedElem.length)==2){
            $(this).children('img').attr('src',Object.values(images)[6]);
          }
          if((a-imgLoadedElem.length)==1){
            $(this).children('img').attr('src',Object.values(images)[8]);
          }   
         }); 
              
         
              
        if ($("div:hidden").length == 0) {
            $("#load").fadeOut('slow');
        }
        $('html,body').animate({
            scrollTop: $(this).offset().top
        }, 1500);
    });
});
1 Like

is there a better approach that maybe you can come up with? I’d like to not have a var images variable with all the images listed. This approach isn’t very practical in my website. I want the divs to have the img src instead of the var images variable.

I’m confused. If you have the image src in the divs then they will load on page load. You asked for a way to postpone loading until an event. Having the src values in an array is a way to do that.

What did you have in mind if not that?

EDIT
Maybe something like this?

1 Like

Another approach is to set a data attr into img element.The data attr will contain the image link and when you are click at load more button then the empty src attr will load the data value.See it below:
HTML

<div> <img src="http://i.imgur.com/CmU3tnl.jpg" data-link="http://i.imgur.com/CmU3tnl.jpg"> </div>
<div> <img src="" data-link="http://i.imgur.com/TDdxS9H.png"> </div>
<div> <img src="" data-link="http://i.imgur.com/39rpmwB.jpg"> </div>
<div> <img src="" data-link="http://i.imgur.com/1lBZQ1B.png"> </div>
<div> <img src="" data-link="https://i.imgur.com/Y5Ld4Qfh.jpg"> </div>
<div> <img src="" data-link="http://i.imgur.com/8HumESY.jpg"> </div>
<div> <img src="" data-link="http://i.imgur.com/8HumESY.jpg"> </div>
<div> <img src="" data-link="http://i.imgur.com/CqCZBvk.png"> </div>
<div> <img src="" data-link="http://i.imgur.com/wQVPRVp.png"> </div>

<a href="#" id="loadMore">Load More</a>

JQuery:

$(function () {
    $("div").slice(0, 1).show();
    $("#loadMore").on('click', function (e) {
        e.preventDefault();
      
        //The code below load tha data-link value into the src of the img element
        $("div:hidden").children('img').attr('src', $("div:hidden").children('img').data('link'));
        console.log($("div:hidden").children('img').data('link'));
       // End of the code that I added.
      
        $("div:hidden").slice(0,1).slideDown();
                
        if ($("div:hidden").length == 0) {
            $("#load").fadeOut('slow');
        }
        $('html,body').animate({
            scrollTop: $(this).offset().top
        }, 1500);
    });
});
1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.