Load more on clicking without loading all images first

Question

I have created an "overview" container with 100 images. on visit the page will only show one image.

When you click "load more" you will see 1 more, etc.. etc..

<div class="overview">
    <div class="block">
        <img src="http://oi50.tinypic.com/4kyccw.jpg"     alt="image_name_01" />
    </div>
    <div class="block">
        <img src="http://oi46.tinypic.com/2n208j7.jpg"     alt="image_name_02" />
    </div>
    <div class="block">
        <img src="http://oi50.tinypic.com/120me85.jpg"     alt="image_name_03" />
    </div>     
</div>
<div id="loadMore">Load More</div>

What I don't want is to load all the 100 images on visit. but only 1 at the time. (saving bandwidth if you're on a phone or a tablet) without the use of a database.

I used the "load more" from this question: jQuery load first 3 elements, click "load more" to display next 5 elements

Example: http://jsfiddle.net/2qjt9/

Any ideas?

You try lazy loading? http://www.appelsiini.net/projects/lazyload — zgood, May 13 '14 at 23:19

score 4 · Answer 1 · answered May 13 '14 at 23:59

jsFiddle Demo

The image will only be loaded when it is set to the source of an image. This can be done with new Image().src="url" or in css. However, if you just have an array of strings, then none of the urls will be loaded. For example

var imgs = [ 
 "http://www.nasa.gov/images/content/133202main_d_reichart_image2.jpg",
 "http://www.nasa.gov/images/content/133202main_d_reichart_image2.jpg",
 "http://www.nasa.gov/images/content/133202main_d_reichart_image2.jpg",
 "http://www.nasa.gov/images/content/133202main_d_reichart_image2.jpg",
 "http://www.nasa.gov/images/content/133202main_d_reichart_image2.jpg",
 "http://www.nasa.gov/images/content/133202main_d_reichart_image2.jpg"
];

So I would store your image urls in an array like that and then use them when the time was right. Something I have taken to recently is using html templates. This would mean defining a set of html to populate

<div class="picTemplate">
 <img />
</div>

And then removing it right at the beginning

var template = $('.picTemplate').remove();

So that you can later clone it in your event for re-use

$("#loadMore").click(function(){
 var index = $('.picDisplay .picTemplate').length;
 if( index >= imgs.length ){
  $(this).remove();
  return;
 }
 var next = template.clone();
 var img = next.find('img')[0];
 img.src = imgs[index];
 img.alt = "some name";
 $('.picDisplay').append(next);
});

score 2 · Accepted Answer · answered May 13 '14 at 23:23

Using jQuery, you could make clicking the button create the new div rather than just showing it using the .append() feature. http://api.jquery.com/append/

Of course writing html in your javascript might get messy. But luckily you already have it prewritten and working, just copy and paste.

Using .attr() you could also give the image in each div a src only on click, saving the load bandwidth as well. http://api.jquery.com/attr/

Load more on clicking without loading all images first

2 Answers2

Linked