带窗口加载的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) 这越过你的问题

Answer 2

window.onload = document.ondomcontentloaded！尝试将它放在后者而不是：

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

（这是$(document).ready(function() { ... });短手语法）。