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

Question

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

3

我在使用这个 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>

- Michael Stenberg

6

DOM准备就绪并不意味着图片已经加载完毕。 - Alxandr

1

你为什么要写两次完全相同的函数？ - techfoobar

@techfoobar：为了举例子，我会假设他是说第一个可以运行，但第二个不行。 - gen_Eric

我对使用Javascript和JQuery也相对较新。这是我忽视了很长时间的东西。谢谢大家。 - Michael Stenberg

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Travis J · Accepted Answer

如评论所示，document.ready != window.onload。Document.ready 不会等待图片实际加载完成。因此，它可能会给出错误的结果。当您想要等待图像完全加载时，应挂钩 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');
        }
};