Question

I’m an jQuery noob and I’m wondering how fix this issue:

1. I have an external .js script, let’s take reflection.js as example.
2. Reflection.js creates canvas reflection for every class=”reflect” image.
3. I’m appending a few images trough different JS script that starts when (‘document’).ready.
4. Of course reflection.js doesn’t work for images created by the script above.

How to avoid that?

I guess I’ll need callback (?). Unfortunately I’m not getting idea of callbacks idea even after reading documentation.

[edit]

<script src="js/reflection.js" type="text/javascript"></script> 
<script type="text/javascript">

            jQuery().ready(function() {   
            jQuery('#thumbs li').each(function(){
                    jQuery('.'+id+' a').append('<img src="' + imgURL + '" class="reflect" /></a>');
                });
            });
 </script> 

Answer 1

Image loading events do not bubble. You cannot hook into those.

Since your images have the class “reflect” it means you have some control over the source. So I recommend your reflection code publishes an API for you to call.

window.Reflect = function(img) {
    ...
};
...
var img = $("<img></img");
img.attr({
   ...
});
Reflect(img);
...

If you do not want to do this then you can poll the document for new images.

(function poll() {
    var images = $("img.reflect");
    ...
    images.removeClass("reflect")
    setTimeout(poll, 500);
})();