¿Cómo agregar cargar más botón para una página HTML / CSS?

Quiero hacer un sitio web de una sola página y tendrá un gran contenido. Supongamos que tiene 1000 fotos en él. No quiero que la gente espere 5 minutos para cargar mi página. Así que quiero agregar el botón CARGAR MÁS en la parte inferior de la página.

¿Cómo hacer eso con HTML / CSS / JS?

Podrías configurar todos los div s ‘para display:none; al principio y luego use jQuery para mostrar los primeros 10 (o cuantos quiera mostrar):

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

Ejemplo .

Esto le ahorra la molestia de incluir un complemento completo cuando lo que desea se puede lograr en unas pocas líneas de código.

Lo más cerca que puedo leer tu pregunta, quieres el efecto que google y facebook usan hoy en día para cargar publicaciones.

Visita infinite-scroll.com Ellos tienen tu respuesta.

myList id el id de mi etiqueta ul.

x = 9 da 9 vistas desde la primera vez que se puede cargar de nuevo a la vez. Se cargarán 3 más.

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

no estoy seguro de si tiene un servidor de back-end o algo así, pero de todos modos, puede probar algún motor de plantillas de JavaScript como jQuery Template , bigote , etc.

y cargar las imágenes dinámicamente por js sería una solución 🙂