1

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>
Wordpressor
  • 7,173
  • 23
  • 69
  • 108
  • Both your javascript are executed onDomReady... Just reorder them: first add the images to the DOM and then execute the jqeury reflect plugin. – Rudie Apr 16 '11 at 22:44

2 Answers2

3

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);
})();
Raynos
  • 166,823
  • 56
  • 351
  • 396
  • 1
    I think you mean "img" instead of "image" :-) – Pointy Apr 16 '11 at 22:22
  • 1
    @Pointy annoying `` tags. Why can't HTML spell! – Raynos Apr 16 '11 at 22:24
  • 1
    I don't think the load event bubbles up for images. See my answer from an older [question](http://stackoverflow.com/questions/3043635/live-keyword-not-working-on-load-with-dynamic-html-images/3044115#3044115). – Anurag Apr 16 '11 at 22:25
  • Don't name your anonymous function! The poll example won't work like this. You mean `(function() {`? – Rudie Apr 16 '11 at 22:43
  • 1
    @Rudie, the function is self-referent. A named anonymous function is a way to avoid arguments.callee, which is depricated. – chuckj Apr 16 '11 at 22:51
  • @Raynos, can you please tell me how to exactly use your functions with the code I provided? For now they don't work for me. – Wordpressor Apr 16 '11 at 22:56
  • @Wordpressor You need to change the source of your reflection library. – Raynos Apr 16 '11 at 23:56
  • @Raynos, what do you mean by changing source? – Wordpressor Apr 17 '11 at 02:29
  • @Wordpressor is "reflection.js" code you wrote or 3rd party code? It's completely dependent on the source of reflection. – Raynos Apr 17 '11 at 03:03
  • @Raynos, nope, I'm using this script: http://www.digitalia.be/software/reflectionjs-for-jquery – Wordpressor Apr 17 '11 at 11:32
0

If I understand this correctly, you have 2 functions under "ready" sequence and one script depends on other.

The way how I solved this problem, I have build my own includeJS as well as additional ready-checking layer on top of the one which jQuery has.

https://github.com/atk4/atk4/blob/master/templates/js/start-atk4.js

So my code looks like this:

$(function(){
   $.atk4.includeJS('reflection.js');
   $.atk4.includeJS('different.js');
   $.atk4(function(){
       $('.reflect').reflection();
   });
});

What happens is, after document is ready, jQuery launches above code. It appends 2 scripts and evaluates them (by adding tag). When evaluation is complete, function atk4.get will execute readiness chain very similar to how jQuery does it.

romaninsh
  • 10,606
  • 4
  • 50
  • 70