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?
Share Improve this question edited May 23, 2017 at 12:13 CommunityBot 11 silver badge asked May 13, 2014 at 23:16 Bert BakkerBert Bakker 1511 gold badge2 silver badges12 bronze badges 1- You try lazy loading? appelsiini/projects/lazyload – zgood Commented May 13, 2014 at 23:19
2 Answers
Reset to default 4jsFiddle 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/