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()
.