JQuery:(window).resize 有效，(document).ready 无效

Question

我在使用此 JQuery 脚本时遇到一些问题。调整图像大小时它可以完美地工作，但我无法让它在初始页面加载时工作。有任何想法吗？我完全陷入困境，没有什么对我有用。

   <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

如注释中所示，document.ready != window.onload。 Document.ready 不会等待图像实际加载。因此，它可能会产生不好的结果。当您想要等待图像完全完成时，您应该 Hook window.onload 事件(这也是需要等待图像加载的视差网站使用的机制)。

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');
        }
};