jQuery的/ JavaScript的：如何顺序（而不是并行）加载（一些）图像？

Question

The problem is unique to Single Sign On sites with cross site links. The portal (my project) maintains a database of metadata describing images on two remote sites. All 3 require Shibboleth authentication and use the same identity provider.

When users connect to machine that does not have an existing session they are redirected to the Identity Provider, if they have a session there info a back channel is used to create a local session.

The problem occurs when a browser opens multiple simultaneous connections that need to create a new local session. One connection might succeed but most if not all will fail.

The solution (I think) is to have a small image from each remote site on the first portal page that are loaded one at a time. Once the sessions are established everything works well.

Finally my question: how do I load a list of remote images one at a time waiting for each to fully load before requesting the next one.

Answer 1

var imageNames = ['img1.png', 'img2.png'];
var counter=0;

function loadImage(imageName, counter){
  $.get(imageName).done(
    function(){
      console.log(imageNames[counter] + ' loaded');
      counter++;
      if(counter < imageNames.length){
        loadImage(imageNames[counter], counter);
      }
    }
  );
}

loadImage(imageNames[counter], counter);