Question

I’m using the flikr badge code (http://www.flickr.com/badge_code_v2.gne) like so

<!-- Start of Flickr Badge -->
<div id="flickr_badge_uber_wrapper">
<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?..."></script>
<p class="clear"><a href="http://www.flickr.com/photos/..." target="_blank" rel="external">see more...</a></p>
</div>
<!-- End of Flickr Badge -->

This works great, apart from it’s near the top of the page and the flikr api will occasionally hang the rest of the site. To stop this I figure I could either move the html to the bottom of the page and use some extra css to stylise where I want it to go, or use some javascript to make it load later. The former sounds like it involves a bit too much absolute positioning, while I’m a little confused how to go about the latter.

Normally this would be easy, for example:

document.onload = function() {
   // Do something
}

But how do I do it with the flickr badge code, it’s a link to dynamically produced javascript?

EDIT

The source from the link is i.e. the js pulled in:

var b_txt = '';

// write the badge

b_txt+= // some html, b_txt+= called for each image.

b_txt += '<span style="position:absolute;left:-999em;top:-999em;visibility:hidden" class="flickr_badge_beacon"><img src="http://geo.yahoo.com/p?s=792600102&t=53dd558c54466a104f77d195043a008d&r=http%3A%2F%2Flocalhost%3A8000%2F&fl_ev=0&lang=en&intl=uk" width="0" height="0" alt="" /></span>';

document.write(b_txt);

Answer 1

Use a placeholder <div> where you want it to finally appear. Then use jquery $(document).ready and set the innerHTML of your placeholder div to the span/img/script tag. place the script tag near then end of the body, and it will load last. When everything is finished loading, document.ready will be fired

Something like this

$(document).ready(
     function(){
          $("#placeholder").innerHTML("<script/span/img>");
});