Event after content changes and loading is complete

[daveJay42]

I'm trying to run code that fires after the loading is complete on an image I'm bringing in with response.js. If the image was embedded in the html traditionally the following would work...

$(".textonphoto img").one('load', function() {
    // image load function
}).each(function() {
   if(this.complete) {
      // image completely loaded.
   }
});

But this doesn't fire on img elements brought in through response.js

The issue I'm having is that firing the event using .ready or .resize (R.action) works fine, but the image might not be completely loaded. So where I'm asking for the height of the image, it might come back with zero as a result.

There's a little plugin developed to deal with this issue in a traditional image tags... http://desandro.github.io/imagesloaded/ But this wouldn't detect img's in response.js data tags that I'm using

<div
data-min-width-641="<img src='../img/issue01/world-asia.jpg'>"
data-min-width-1025="<img src='../img/issue01/world-asia-big.jpg'>">
</div>

[ryanve]

I'm planning to rework the internal API to accommodate emitting events. But in your use case I think they'd be unaware of the image rendering. Does deferring the code via setTimeout make a difference? How does your plugin deal with AJAX content?

Related: #41 and #35

[daveJay42]

I don't deal with AJAX content currently. And I don't have a plugin. I'm just calling some functions with the events in Response. I've used setTimeout with limited success, the problem is that the page I'm working on is very image heavy and it's very heavy, so the timeout is hit or miss, I have it firing at up to 10 seconds after Response.ready and it still has issues sometimes.

It appears that part of my problem is due to the weight or nature of my page. Response.js adds to the complexity, but I don't think it's the primary culprit in my problem. Even with traditional image tags it turns out I have an issue. I just wanted to check and see if there were a way that you knew of to integrate what Desandro did with "ImagesLoaded" into response.js

[MuTLY]

Assuming you're using jQuery, have you tried...

$('document').on('load','img',function(){
    //Do something when images load
});