10

Tengo muchas imágenes pero el cargarlas se relentiza la página, y lo que necesito es que cargue la primera imagen al 100% y luego comience a cargar la siguiente, y que el ciclo se repita hasta que todas las imagines estén cargadas.

Por ejemplo:

<div class="imagenes">
<img src="pequena1.png">  
<img src="pequena2.png">
<img src="pequena3.png">  
</div>

Lo importante es que la siguiente imagen cargue automaticamente "solo" después de que la anterior este cargada al 100%, de esta manera no se sobrecargara la página.

El número de imágenes puede variar, por lo tanto sería bueno que detectara la etiqueta <img> incluidos en un <div> determinado.

Algún tipo de bucle, pero se detenga hasta que la última imagen este cargada.

1
  • 1
    Hola! En vez de cargar las imágenes al modo tradicional con HTML, podrías hacerlo con Javascript. Allí puedes hacer el ciclo o bucle, detectando que cada vez que una imagen se carga (evento load de cada imagen), recién le envíes el href de la siguiente...
    – quinqui
    el 13 mar. 2018 a las 20:47

2 respuestas 2

11

Una solución sencilla sería cargar las imágenes una a una, no usando su src sino un data-atributo, e ir sustituyendo el src de la imagen sólo cuando se haya cargado la imagen anterior (usando el evento onLoad de la imagen para ello). Para ello podrías usar una función simple que lea las imágenes, las guarde en una lista y las vaya cargando en orden.

Algo como esto:

// lista de imágenes a cargar (las que tengan data-src)
var imagenesACargar = document.querySelectorAll("img[data-src]");
// total de imágenes cargadas
var totalImagenesCargadas = -1;

// función que carga la siguiente imagen de la lista
function cargarImagenesUnaAUna() {
  // avanzamos a la siguiente imagen de la lista
  totalImagenesCargadas++;
  // si existe (aún quedan imágenes)
  if (imagenesACargar[totalImagenesCargadas]) {
    // le asignamos esta función al evento onload
    imagenesACargar[totalImagenesCargadas].onload = cargarImagenesUnaAUna;
    // cambiamos el src por el valor del data-atributo
    imagenesACargar[totalImagenesCargadas].src = imagenesACargar[totalImagenesCargadas].dataset.src;
  }
}

Para evitar inconvenientes con imágenes vacías, sería bueno que le pusieras un src a las imágenes con un pixel transparente o algo. De ese modo no tendrías llamadas innecesarias al servidor o posibles problemas 404.

Aquí puedes ver una demo funcionando:

var imagenesACargar = document.querySelectorAll("img[data-src]");
var totalImagenesCargadas = -1;

function cargarImagenesUnaAUna() {
  totalImagenesCargadas++;
  if (imagenesACargar[totalImagenesCargadas]) {
    imagenesACargar[totalImagenesCargadas].onload = cargarImagenesUnaAUna;
    imagenesACargar[totalImagenesCargadas].src = imagenesACargar[totalImagenesCargadas].dataset.src;
  }
}

cargarImagenesUnaAUna();
<img src="" data-src="https://placehold.it/200x200/" />
<img src="" data-src="https://lorempixel.com/400/200" />
<img src="" data-src="https://placehold.it/300x200/" />


El mismo código transformado a un mini-plugin de jQuery (como se menciona en los comentarios):

$.fn.cargaImagenesUnaAlTiempo = function() {
  let imagenesACargar = $(this).find("img[data-src]");
  let totalImagenesCargadas = -1;

  function cargarImagenesUnaAUna() {
    totalImagenesCargadas++;
    if (imagenesACargar[totalImagenesCargadas]) {
      $(imagenesACargar[totalImagenesCargadas]).on("load", cargarImagenesUnaAUna);
      $(imagenesACargar[totalImagenesCargadas]).attr("src", $(imagenesACargar[totalImagenesCargadas]).data("src"));
    }
  }
  
  cargarImagenesUnaAUna()
};

$("#midiv").cargaImagenesUnaAlTiempo();
$("#midiv2").cargaImagenesUnaAlTiempo();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="midiv">
  <img src="" data-src="https://placehold.it/200x200/" />
  <img src="" data-src="https://lorempixel.com/400/200" />
  <img src="" data-src="https://placehold.it/300x200/" />
</div>

<div id="midiv2">
  <img src="" data-src="https://placehold.it/300x300/" />
  <img src="" data-src="https://lorempixel.com/400/300" />
  <img src="" data-src="https://placehold.it/300x300/" />
</div>

Aunque no sé si esto es lo que tenías en mente. La idea es que ahora puedes llamar a la función cargaImagenesUnaAlTiempo desde jQuery seleccionando el elemento al que quieres que se aplique. Por ejemplo, si quieres que las imágenes de #div-con-imagenes se carguen una a una, entonces harías $("#div-con-imagenes").cargaImagenesUnaAlTiempo().

10
  • Exelente, basicamente es lo que estaba nesecitando, muchas gracias y esta respuesta es altamente recomendada. Ahora,solo tengo 2 cositas pendientes: 1-hay algun modo de agregar la imagen src con algun js, para no tener que ponerlo en todas las imagenes. 2- hay algun modo de que se limite o especifique que las imgenes a cargar estan dentro de un div y asi no tener que cambiar el src?
    – Manuel b
    el 15 mar. 2018 a las 12:54
  • 1
    @Manuelb para el punto 2, lo único que tendrías que hacer es cambiar el selector. Por ejemplo, ahora mismo es img[data-src] que seleccionará todas las imágenes de la página que tengan un atributo "data-src", pero si quieres que sólo lo haga para las imágenes que estén dentro de por ejemplo el div con id "midiv", entonces el selector sería algo como esto #midiv img[data-src]. Como puedes ver es bastante sencillo.
    – Alvaro Montoro
    el 15 mar. 2018 a las 14:01
  • @Manuelb no termino de comprender a qué te refieres en el punto 1. ¿Podrías describirlo con más detalle?
    – Alvaro Montoro
    el 15 mar. 2018 a las 14:02
  • Olvidalo,es solo algo para la estetica en el codigo, pero ya perdio importancia. Ahora, podrias enseñarme la equivalencia del codigo pero en jquery, e encontrado que el uso de javascript es limitado en navegadores viejos, y la insercion de jquery es una ventaja. Me has sorprendido lo basico y potente de la solucion que aportas,pero se podria hacer lo mismo facil, basico y practico en jquery?
    – Manuel b
    el 15 mar. 2018 a las 17:59
  • 1
    @Manuelb el plugin es la última edición que le hice a la respuesta.
    – Alvaro Montoro
    el 15 mar. 2018 a las 20:23
3

Podrías utilizar el plugin Lazy Load, según el scroll de como la página vaya avanzando, las diferentes imágenes se cargarán, así podrías evitar la relentización de la página hacia el usuario.

introducir la descripción de la imagen aquí

DEMO

2
  • 1
    La demo me lleva a un enlace que está roto. el 15 mar. 2018 a las 18:40
  • @FranciscoRomero Listo, ya se está el enlace bien.
    – Hoose
    el 15 mar. 2018 a las 19:05

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.