Question

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

代码是

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

该网站正在使用animate.css库

Answer 1

ready方法不等待加载资源。

虽然JavaScript在呈现页面时提供了用于执行代码的加载事件，但在完全接收到所有资产（如图像）之前，不会触发此事件。在大多数情况下，只要完全构造DOM层次结构，就可以运行脚本。传递给.ready（）的处理程序保证在DOM准备好后执行，因此这通常是附加所有其他事件处理程序并运行其他jQuery代码的最佳位置。使用依赖于CSS样式属性值的脚本时，在引用脚本之前引用外部样式表或嵌入样式元素非常重要。

参考：https://api.jquery.com/ready/

使用window.load方法：

当加载事件和所有子元素已完全加载时，会将事件发送到元素。此事件可以发送到与URL关联的任何元素：图像，脚本，框架，iframe和窗口对象。

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

参考：https://api.jquery.com/load-event/

Answer 2

这里的问题是你说＆＃34;页面加载＆＃34;但是你还没有定义这意味着什么。实际上，动画是在DOM加载后播放的。这就是$（document）.ready方法所保证的。但是，在DOM准备好之后，任何图像或异步调用仍然可以触发。所以...真正的问题是，你想要在图像加载后等待，你是否有任何需要考虑的异步调用。

我刚刚写了这个，所以我不能100％确定它是否有任何错误，但这应该适用于这两种情况。

jQuery.prototype.pageComplete = function(promises, callback){
    if(!callback){
        callback = promises;
        promises = [];
    }

    var images = jQuery.Deferred();
    var DOMReady = jQuery.Deferred();
    var count = this.length;

    promises.push(images);
    promises.push(DOMReady);

    jQuery(document).ready(function(){
        DOMReady.resolve();
    });

    function counter(){
        if(--count == 0) images.resolve();
    }

    this.each(function(image){
        var img = new Image();
        img.onload = counter;
        img.src = image.src;
    });

    jQuery.when.apply(jQuery, promises).then(callback);
};

你这样使用它：

// for just images
$('img').pageComplete(function(){
    // code to transition image here
});

 // for images and ajax
$('img').pageComplete([
        ajax1, // these are all promises created by jQuery.ajax
        ajax2,
        ajax3
    ],
    function(){
    // code to transition image here
});

Answer 3

尝试这个，解决方案应该没有jquery

window.onload = function() {
  document.getElementById('logo-large').classList.add('animated', 'bounceInLeft');
};

Answer 4

使用窗口加载功能

这将等到整个页面加载后再运行动画

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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

4 个答案: