Question

我有一个javascript按钮，当鼠标悬停在其上时会自动设置动画。问题是动画是动态的，它会在你悬停执行悬停事件时缓存div的宽度和高度（动画的扩展将取决于div的宽度和高度......）。

在正常页面加载期间它很好，但是当页面加载缓慢并且我在部分加载的div上执行悬停事件。我注意到缓存的宽度和高度是错误的，导致我的动画往往不合适。

在我的所有HTML完全加载之后，我应该如何确保悬停事件，而不是之前......（这样我不会缓存错误的值）？

Answer 1

通过缓存div的维度并不确定你的意思。什么div？

在DOM准备就绪后添加事件。

如果你正在使用jQuery，你可以这样做：

function animationStart(){
    // ...
}

function animationEnd(){
    // ...
}

$(document).ready(function(){
    $('#my-button').hover(animationStart, animationEnd);
});

Answer 2

将悬停事件绑定放在准备好的文档中，只有在dom加载完成后才会触发。

$(document).ready(function() {
    $("#hover").hover(
        function() { 
            // hover on
        }, 
        function() {
            // hover off
        } 
    );
})

HTML / DOM完全加载后加载javascript最安全的方法？

2 个答案: