在gif完全载入jQuery之后运行javascript

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".

在DOM完全加载后运行代码。这包括图像，尽管它似乎不包括gif图像。从我所看到的，加载gif的第一帧被算作“已加载”。

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

填充gif加载后是否有触发代码的方法?

4 个解决方案

#1

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

在onload事件中，在gif完全载入jQuery之后运行javascript 元素具有-这应该很有用。

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

如果您想使用jQuery，可以在这里阅读:https://api.jquery.com/load-event/

#2

Images have a onload event that fires.

图像有一个onload事件，它会触发。

$(".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.

如果你正在寻找一个旧版本IE (pre - IE9)，如果动态改变src属性，有时会遇到麻烦，你还需要检查图像。

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

编辑:查找属性名，发现了这样一个问题:图像加载上的jQuery回调(即使是在缓存图像时)

#3

You may use the imagesloaded plugin for this use case.

您可以使用这个用例的imagesloaded插件。

#4

-1

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

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

#1