how to handle any javascript load finished event using jquery

Question

I have a blog. I'm insert yahoo pipe. I need to remove yahoo pipe icon after script load finish. script is here>>

    <script src="http://l.yimg.com/a/i/us/pps/listbadge_1.1.js"&gt;
{"pipe_id":"24f8f6a880eb3be0711d541","_btype":"list","width":"100%","hideHeader":true}
</script>

My code is here>>

$("script[src=http://l.yimg.com/a/i/us/pps/listbadge_1.1.js]").load(function(){
$(".ybf").hide();
});

But this don't work.

How to handle script load finish?

Answer 1

Something like this should work.

$("DOM ITEM TO LOAD SCRIPT INTO").load(
     "http://l.yimg.com/a/i/us/pps/listbadge_1.1.js",
     {"pipe_id":"24f8f6a880eb3be0711d541","_btype":"list","width":"100%","hideHeader":true},
     function(){
          $(".ybf").hide();
      });
);

look under the examples: http://docs.jquery.com/Ajax/load

Answer 2

This should get you started for Firefox 3+

$('.ybf').live('DOMAttrModified', function() { 
  if ($(this).css('display') !== 'none')
    $(this).css('display', 'none');
});

I would look into the propertychange event for IE, but I didn't have any luck combining that event with the jQuery live events, probably because they don't bubble. There may be another way to work around this however.

Good luck!

EDIT: You might want to look into the liveQuery plugin for jQuery. It looks to have more functionality and you may be able to get live binding to the 'propertychanged' event that IE supports.