加载页面后在页面上执行动画
我正在为一个网站做维护工作。home page上的徽标应该在页面加载后从左侧弹出，但即使页面仍在加载，动画也会开始。
代码是
$(document).ready(function(){
$('#logo-large').addClass('animated bounceInLeft');
});该站点正在使用animate.css库
回答 4
Stack Overflow用户
发布于 2015-04-26 21:05:16
ready方法不等待资源加载。
虽然JavaScript提供了在呈现页面时执行代码的load事件，但在完全接收到所有资产(如图像)之前，不会触发此事件。在大多数情况下，只要完全构造了DOM层次结构，脚本就可以运行。传递给.ready()的处理程序保证在DOM就绪后执行，因此这通常是附加所有其他事件处理程序和运行其他jQuery代码的最佳位置。当使用依赖于CSS样式属性值的脚本时，在引用脚本之前引用外部样式表或嵌入样式元素非常重要。
参考：https://api.jquery.com/ready/
使用window.load方法：
当某个元素和所有子元素都已完全加载时，将向该元素发送load事件。此事件可以发送到与URL关联的任何元素:图像、脚本、帧、iframe和窗口对象。
$(window).on('load', function() {
$('#logo-large').addClass('animated bounceInLeft');
});Stack Overflow用户
发布于 2015-04-26 21:05:34
这里的问题是，你说“页面加载”，但你还没有定义这是什么意思。实际上，动画是在DOM加载之后播放的。这就是$(document).ready方法所确保的。但是，在DOM准备好之后，仍然可以触发任何图像或异步调用。所以..。真正的问题是，您是否希望等到映像加载完毕，以及是否有任何需要考虑的异步调用。
我只是写了这篇文章，所以我不能百分之百确定它是否没有任何bug，但这应该适用于这两种情况。
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
}); Stack Overflow用户
发布于 2015-04-26 21:07:02
试试这个，解决方案不需要jquery就可以工作
window.onload = function() {
document.getElementById('logo-large').classList.add('animated', 'bounceInLeft');
};https://stackoverflow.com/questions/29877960
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号