JQuery: (window) .resize fonctionne, (document) .ready ne fonctionne pas

Question

Je rencontre des problèmes pour faire fonctionner ce script JQuery. Cela fonctionne parfaitement lors du redimensionnement de l'image, mais je n'arrive pas à le faire fonctionner sur le chargement initial de la page. Des idées? Je suis complètement coincé et rien ne fonctionne pour moi.

<script type="text/javascript"> 
     $(window).resize(function() { 
      if ($(window).width() <= 600) { 
       $('#fcalendar').fullCalendar('changeView', 'basicDay'); 
      } else if ($(window).width() < 748) { 
       $('#fcalendar').fullCalendar('changeView', 'basicDay'); 
      } else { 
       $('#fcalendar').fullCalendar('changeView', 'month'); 
      } 
     }); 

     $(document).ready(function() { 
      if ($(document).width() <= 600) { 
       $('#fcalendar').fullCalendar('changeView', 'basicDay'); 
      } else if ($(window).width() < 748) { 
       $('#fcalendar').fullCalendar('changeView', 'basicDay'); 
      } else { 
       $('#fcalendar').fullCalendar('changeView', 'month'); 
      } 
     }); 
    </script> 

Answer 1

Comme indiqué dans les commentaires, document.ready! = Window.onload. Document.ready n'attendra pas le chargement des images. Ainsi, il peut donner de mauvais résultats. Vous devez vous connecter à l'événement window.onload lorsque vous souhaitez attendre que les images soient complètement terminées (c'est également le mécanisme utilisé dans les sites de parallaxe qui doivent attendre le chargement des images).

window.onload = function() { 
     if ($(document).width() <= 600) { 
      $('#fcalendar').fullCalendar('changeView', 'basicDay'); 
     } else if ($(window).width() < 748) { 
      $('#fcalendar').fullCalendar('changeView', 'basicDay'); 
     } else { 
      $('#fcalendar').fullCalendar('changeView', 'month'); 
     } 
};