know when specific resource finish loading

Question

sorry if this thread is repited but i didn't find it in browser.

I want to create/handle an event that let me know when a specific resource load into the web page. (similar to onload or DOMContentLoaded, BUT i need to know when each resource finish, not the whole page) Example--> Assets = image1,image2,image3,...

when finish loading image1 trigger a ready event,

After ready event triggered start loading image2

keep going...keep going....

After last image, trigger again ready event.

The final result is the same as DOMContentLoaded or "windows.onload", but as i said im not abble to put some logic in the middle of assets load.

Someone know how to handle that kind of thing?

Answer 1

I am not sure, why (or if) you want to 'load' the images in a specific order. Be aware that browsers rarely open a single connection. Normally all resources will be collected (after downloading the html itself) and the browser will load many of them in parallel. In short - in case you do this for performance or speed, you would slow down the process!

A more common approach to lazy load images is using the viewport / scroll position to decide which images should be loaded "next", there are a few jquery plugins, e.g. lazyload.

Anyway - in case you do not care about the order and you just want to a element specific callback when ready you could do something like this:

$("img").one("load", function() {
  var $this = this;
  // 'this' is your specific element
  // do whatever you like to do onready
}).each(function() {
  // handle cached elements
  if(this.complete) $(this).load();
});

In case you do care about the order and you really want to load the next image after the first one is ready you need a different approach.

First: Your HTML does not contain image sources, but images with a data-attribute(s):

<img data-src="the/path/to/your/image" data-assets-order="1" /> 

Second: In JS you collect all these images without a real source, you order the collection and finally trigger the loading one after each other.

var toLoad = [];

// scanning for all images with a data-src attribute 
// and collect them in a specified order.
$('img[data-src]').each(function() {
  // either you define a custom order by a data-attribute (data-assets-order) 
  // or you use the DOM position as the index. Mixing both might be risky.
  var index = $(this).attr('data-assets-order') ? 
    $(this).attr('data-assets-order') : toLoad.length;
  // already existing? put the element to the end
  if (toLoad[index]) { index = toLoad.length; }
  toLoad[index] = this;
});

// this method handles the loading itself and triggers
// the next element of the collection to be loaded.
function loadAsset(index) {
  if (toLoad[index]) {
    var asset = $(toLoad[index]);
    // bind onload to the element
    asset.on("load", function() {
        // in case it is ready, call the next asset
        if (index < toLoad.length) {
          loadAsset(index + 1);
        }
    });
    // set the source attribut to trigger the load event
    asset.attr('src', asset.attr('data-src'));
  }
}

// we have assets? start loading process
if (toLoad.length) { loadAsset(index); }

Answer 2

I'm not sure if this will work for you, but did you tried the setTimeOut function?

You can set a specific time for your image to load (through ajax, you can make the call to the resource and wait until request.done), and after that, call to the next one.

I also found something 'similar' to your request here: How to wait for another JS to load to proceed operation?

Sorry if this doesn't help you.