How to add an extra download button for an HTML / CSS page?

Question

I want to create a site on one page, and it will have huge content. Suppose there are 1000 photos on it. I don’t want people to wait 5 minutes to load my page. So I want to add a LOAD MORE button at the bottom of the page.

How to do it with HTML / CSS / JS?

Answer 1

First you can set all div s' to display:none; and then use jQuery to show the first 10 (or how much you would like to show):

 $(function(){ $("div").slice(0, 10).show(); // select the first ten $("#load").click(function(e){ // click event for load more e.preventDefault(); $("div:hidden").slice(0, 10).show(); // select next 10 hidden divs and show them if($("div:hidden").length == 0){ // check if any hidden divs still exist alert("No more divs"); // alert if there are none left } }); }); 

An example .

This eliminates the need to include the entire plugin when what you want can be achieved in a few lines of code.

Answer 2

The next I can read your question, you want what effect does Google and Facebook use to upload messages.

Visit infinite-scroll.com They have your answer.

Answer 3

myList id id of my ul tag.

x = 9 gives only 9 views the first time, and you can download them again at a time when 3 more are loaded.

 $j(document).ready(function () { size_li = $j("#myList li").size(); x=9; $j('#myList li:lt('+x+')').show(); $j('#loadMore').click(function () { x= (x+3 <= size_li) ? x+3 : size_li; $j('#myList li:lt('+x+')').show(); }); }); 

Answer 4

Not sure if you have a backend server or something like that, but in any case, you can try using the JavaScript template engine like jQuery Template , mustache , etc.

and dynamically upload images via js will be the solution :)