0

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?

Jona Santana
  • 105
  • 2
  • 2
  • 11

2 Answers2

1

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.

Community
  • 1
  • 1
David
  • 161
  • 1
  • 9
  • Yes, actually im "patching" with timeOuts... but i think is not the correct way because if the conection is lagged timeOut is not lagged xD – Jona Santana Dec 30 '16 at 12:15
  • Im going to see that example and then tells you how it goes, ty :) – Jona Santana Dec 30 '16 at 12:16
  • Well, if you go with the ajax thing (I also think that isn't the correct way), if the connection from the server is lagged, your ajax will be it to. Tell me something when you resolve it, it's an interesting post! :) – David Dec 30 '16 at 12:21
  • 1
    mmm... it seems rasonable. yes it like i want to use DOMContentLoaded to each uploading file, but it refers to the hole dom load :p im going to research and test that. Write you back when got something :) ty bro! – Jona Santana Dec 30 '16 at 12:26
  • 1
    well... axel got the kappa! :p – Jona Santana Dec 30 '16 at 12:41
  • Awesome then! Have fun coding and happy new year ;)! – David Dec 30 '16 at 12:43
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); }
axel.michel
  • 5,764
  • 1
  • 15
  • 25