Perform the flickr badge code after page loads
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 a开发者_JAVA百科nd 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);
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>");
});
A simple solution would be to pull the script tag out of the wrapper. Position the flickr_badge_uber_wrapper
wherever you'd like it, and then place the javascript src call at the end of the body. I don't see a reason why the javascript couldn't be pulled from the wrapper and loaded later on page load. That should be the easiest way to keep your page from hanging.
精彩评论