JavaScript/jQuery 函数在窗口加载时跳过代码

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) 这解决了你的问题