Search code examples
javascripthtmlanimated-gifpageload

Load animated gif after all other files on page load

I have a pretty massive animated gif (several mb!), and I don't want to hold up the rest of the elements from loading on the page before loading the gif. What technology/technique would you use to do this? I'm not asking for code here, just to be pointed in the right direction... if it's jQuery, or... something else, maybe? I'd love to know what best practices are with something like that.

Solution

  • If you are already using jQuery, it is very simple : HTML:

    <img id='the_image' style='width:100px;height:200px' src='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'>

    Javascript:

    $(function() {
    $('#the_image').attr('src','http://example.com/image.gif');
});

    The default src I used is just a very simple inline transparent gif to hold it's place until the real image is called.

    Demo : http://jsfiddle.net/trex005/cmkLn87L/