Question

我有一个函数，它将一些css规则应用于窗口加载的元素。这是我的代码。

function applyHover()
{

        $('.view_preloader .overlay').css('opacity',1);

        $('.view_preloader .s2').css({

            '-webkit-transform' : 'translate3d(59px,0,0) rotate3d(0,1,0,-45deg)',
            '-moz-transform': 'translate3d(59px,0,0) rotate3d(0,1,0,-45deg)',
            '-o-transform': 'translate3d(59px,0,0) rotate3d(0,1,0,-45deg)',
            '-ms-transform': 'translate3d(59px,0,0) rotate3d(0,1,0,-45deg)',
            'transform': 'translate3d(59px,0,0) rotate3d(0,1,0,-45deg)'             

        });

        $('.view_preloader .s3, .view_preloader .s5').css({

            '-webkit-transform' : 'translate3d(59px,0,0) rotate3d(0,1,0,90deg)',
            '-moz-transform': 'translate3d(59px,0,0) rotate3d(0,1,0,90deg)',
            '-o-transform': 'translate3d(59px,0,0) rotate3d(0,1,0,90deg)',
            '-ms-transform': 'translate3d(59px,0,0) rotate3d(0,1,0,90deg)',
            'transform': 'translate3d(59px,0,0) rotate3d(0,1,0,90deg)'              

        });     

        $('.view_preloader .s4').css({

            '-webkit-transform' : 'translate3d(59px,0,0) rotate3d(0,1,0,-90deg)',
            '-moz-transform': 'translate3d(59px,0,0) rotate3d(0,1,0,-90deg)',
            '-o-transform': 'translate3d(59px,0,0) rotate3d(0,1,0,-90deg)',
            '-ms-transform': 'translate3d(59px,0,0) rotate3d(0,1,0,-90deg)',
            'transform': 'translate3d(59px,0,0) rotate3d(0,1,0,-90deg)'             

        });     

        alert(); //Only for testing purpose                             
}

现在，根据要求，我需要在窗口完全加载时调用此函数。就是这样。

$(window).load(function(e) {
    applyHover();
});

但是当窗口加载时，它只会触发代码末尾写的警报函数，并跳过应该应用css的所有代码。

奇怪的是，当我通过点击另一个元素的另一个事件调用相同的函数时，它完全正常。例如

$(document).ready(function(){

   $('.text').click(function(e) {
       applyHover();
   });

});

所以我猜这个问题与窗口加载有关。有什么想法吗？

Answer 1

问题是当window.onload事件被触发时尚未创建DOM - 您应该在ready函数内移动您的调用。或者尝试像这里提到的body.onload：http://www.w3schools.com/jsref/event_onload.asp

看看这里：window.onload seems to trigger before the DOM is loaded (JavaScript) 这可以解决你的问题

Answer 2

window.onload！= document.ondomcontentloaded。试着把它放在后者中：

$(function() {
    applyHover();
});

（这是$(document).ready(function() { ... });的简写语法。）

JavaScript / jQuery函数使用窗口加载跳过代码

2 个答案: