Load an image when the loading of another

A simple solution would be to load the images one by one, not using their src but a data-attribute, and replace the src of the image only when the previous image has been loaded (using the event onLoad of the image for this). For this you could use a simple function that reads the images, saves them in a list and loads them in order.

Something like this:

// 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;
  }
}

To avoid inconveniences with empty images, it would be good if you could put%% co_of the images with a transparent pixel or something. That way you would not have unnecessary calls to the server or possible 404 problems.

Here you can see a working demo:

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/" />

The same code transformed to a jQuery mini-plugin (as mentioned in comments ):

$.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>

Although I do not know if this is what you had in mind. The idea is that you can now call the function src from jQuery by selecting the element you want to apply to. For example, if you want the images of cargaImagenesUnaAlTiempo to be loaded one by one, then you would do #div-con-imagenes .

You could use the Lazy Load plugin, depending on how the page progresses, the different images will be loaded, as well You could avoid slowing down the page to the user.

DEMO