En términos de rendimiento, ¿cuál es el mejor método para mostrar 1000 imágenes en una página?

Question

Estoy tratando de mostrar 1000 imágenes bastante pequeñas en una página (bastante mucho, pero fuera de mi control).

Al cargarlos todos a la vez, el rendimiento obviamente sufre drásticamente la reproducción de 1000 imágenes a la vez.

Intenté implementar la aplicación de la imagen en scroll (en numerosas cantidades - desplazamiento de 250 píxeles, carga de 25 imágenes, etc.), luego intenté cargar las imágenes en un temporizador.

Estos métodos ayudaron a aumentar el rendimiento, pero ¿cuál sería la forma más eficiente de hacerlo? Parecían tener todavía una cantidad irritante de retraso: entiendo que hay un problema fundamental al procesar tantas imágenes en una página, pero ¿hay una mejor solución?

EDIT:

paginación por supuesto ayudaría, pero no es una opción aquí. Además, las imágenes se extraen de una API, por lo que no es conveniente crear 1 imagen/uso de sprites grandes.

Answer 1

Desde sprites/paginación no eran una opción en esta situación, me encontré con la siguiente la mejor solución:

Adaptar las 'imágenes de carga de desplazamiento' método, con algunos ajustes y establecer cruically elemento padre para cada imagen (de modo que hay 1000 elementos, cada uno con imágenes) en display:none.

Con los elementos de padres por defecto en display:none & también haciendo que la primera 25 display:block:

scrollPos var = 0; var endEle = 0;

$ (ventana).desplazamiento (función() {

scrollPos = $(window).scrollTop(); 

    if ($(window).scrollTop() < scrollPos + 250) { 

     //load 15 images. 

     $('.myDiv img').slice(endEle,endEle+50).each(function(obj){ 
      var self = $(this); 
      var url = self.attr("role"); 
      self.attr("src", url); 
      self.parent().css("display","block"); 
     }); 

     endEle = endEle + 50; 

    } 

});

Ajusta los próximos 50 elementos a display:block y cambia la <img role> en <src> (las URL de imagen se pusieron en role cuando se representa la página) cada vez que el usuario se desplaza 250 píxeles.

Answer 2

Si todas las imágenes son archivos únicos, entonces se siente muy beneficiado al hacer múltiples conexiones para recuperarlos. Puede crear 1 imagen "maestra" de todos los elementos y luego crear 1000 divs cada uno con una clase o id diferente, luego en css definir los desplazamientos de fondo para cada uno. Este método a menudo se denomina sprites css.

http://css-tricks.com/158-css-sprites/

Answer 3

¿No podría hacer una paginación AJAX, que dinámicamente las cargas de las imágenes basadas en el número de página? Por ejemplo, 25 imágenes por página. Al solicitar la primera página, carga dinámicamente la siguiente página y así sucesivamente. De esta forma, el usuario no notará la demora. ¡Eso es todo lo que puede hacer para mejorar el rendimiento aún más!

Answer 4

Aquí es una respuesta desde otro ángulo:

Podría combinar las imágenes en el lado del servidor y hacerlos en líneas, tal vez? Aunque esto probablemente solo funcione en ciertas circunstancias.

Answer 5

Bueno, creo que la mejor solución sería renderizarlos a medida que el usuario los vea. es decir, su enfoque de desplazamiento. Esto solo significaría cargar tantas imágenes como el usuario haya visto y no todas a la vez. Si, como dices, está fuera de tu control; entonces usar páginas está fuera de cuestión? Ese sería un mejor enfoque en general.

De todas formas, es probable que muchas imágenes provoquen un retraso considerable, ya que utilizará una gran cantidad de ancho de banda y probablemente también memoria.