How to stop browser loading an image or disconnect to a host?

Question

i'm using jQuery to load facebook profile picture and I want the browser disconnect to facebook if the picture can't be loaded after 5 seconds. Here is my code :

jQuery(window).bind("load", function() {
    jQuery('#fbProfilePicture').attr("src","http://graph.facebook.com/100001225080368/picture");
    setTimeout(function(){              
          //my code
          if (true)
          {
            //how to disconnect to facebook here.
          }
          else
          {
            //do something
          }
    },5000);
});     

I'm using Wordpress. Please help !

Answer 1

I would just set the src attribute to something else. Not very pretty, but since you don't have control over the facebook response not sure how much better it gets. You use jQuery's load event to keep track of whether the image has loaded. If it hasn't then just set the src to something else (nothing in my case) or remove the element.

jQuery(window).bind("load", function() {
    var loaded = false;
    jQuery('#fbProfilePicture').load(function() {
        loaded = true;
    });

    jQuery('#fbProfilePicture').attr("src", "http://graph.facebook.com/100001225080368/picture");

    setTimeout(function() {
        //my code
        if (loaded) {

        } else {
            $('#fbProfilePicture').attr('src', '');
        }
    }, 5000);
});