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=".jpg"     alt="image_name_01" />
    </div>
    <div class="block">
        <img src=".jpg"     alt="image_name_02" />
    </div>
    <div class="block">
        <img src=".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: /

Any ideas?

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./4kyccw.jpg"     alt="image_name_01" />
    </div>
    <div class="block">
        <img src="http://oi46.tinypic./2n208j7.jpg"     alt="image_name_02" />
    </div>
    <div class="block">
        <img src="http://oi50.tinypic./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/2qjt9/

Any ideas?

• javascript
• php
• jquery
• html
• ajax

• You try lazy loading? appelsiini/projects/lazyload – zgood Commented May 13, 2014 at 23:19

2 Answers 2

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);
});

Using jQuery, you could make clicking the button create the new div rather than just showing it using the .append() feature. http://api.jquery./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./attr/