Run javascript after gif is fully loaded with jQuery

Question

I know I can use

$(".container").ready(function(){
  // Run after DOM loaded
});

to run code after the DOM has been fully loaded. This includes images though it seems it doesn't include GIF-images. From what I can see, loading the first frame of the gif counts as "loaded".

Is there a way to trigger code after the fill gif has been loaded?

Answer 1

The <img> element has on onload event - this should do the trick.

If you'd like to use jQuery for that, you can read about it here: https://api.jquery.com/load-event/

Answer 2

Images have a onload event that fires.

$(".image-selector").on("load", function(){
   // Run after the image has loaded.
});

If you are targetting an older version of IE (pre IE9) there are sometimes troubles if dynamically changing the src property and you'll also have to check the image.complete property.

Edit: Went looking for the property name and found this question: jQuery callback on image load (even when the image is cached)

Answer 3

You may use the imagesloaded plugin for this use case.

Answer 4

How about this

$(document).ready(function(){
    $("gif selector").load(function(){
        alert("gift loaded.");
    });
});

Example: http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_load