javascript - 页面加载后在页面上执行动画

Question

我正在为一个网站做维护工作。 home page上的标志应该在页面加载后从左侧反弹，但即使页面仍在加载，动画也会开始。

代码是

$(document).ready(function(){
    $('#logo-large').addClass('animated bounceInLeft');
  });

该站点正在使用 animate.css 库

Answer 1

ready 方法不等待资源加载。

While JavaScript provides the load event for executing code when a page is rendered, this event does not get triggered until all assets such as images have been completely received. In most cases, the script can be run as soon as the DOM hierarchy has been fully constructed. The handler passed to .ready() is guaranteed to be executed after the DOM is ready, so this is usually the best place to attach all other event handlers and run other jQuery code. When using scripts that rely on the value of CSS style properties, it's important to reference external stylesheets or embed style elements before referencing the scripts.

引用:https://api.jquery.com/ready/

使用window.load方法:

The load event is sent to an element when it and all sub-elements have been completely loaded. This event can be sent to any element associated with a URL: images, scripts, frames, iframes, and the window object.

$(window).on('load', function() {
    $('#logo-large').addClass('animated bounceInLeft');
});

引用:https://api.jquery.com/load-event/