Question

我有两个功能在时间上有冲突。没有显示错误，但网站显然不尊重功能的顺序。我怎样才能让它们安全地串联运行？

代码：

///////////////////////////// FADE IN ALL CONTENT

$(window).load(function() {
    $("#site-loader").fadeOut("slow", function() {
        $("#site-container").fadeIn("slow");
    });
});

///////////////////////////// SKROLLR/MEDIACHECK

mediaCheck({
    media: '(max-width: 1024px)',
    entry: function() {
        skrollr.init().destroy();
    }, // END MOBILE MEDIACHECK
    exit: function() {
        var s = skrollr.init({
            // beforerender: function(data) {
            //     return data.direction == 'down';
            // },
            render: function(data) {
                //Log the current scroll position.
                console.log(data.curTop);
            },
            // smoothScroll: false,
            forceHeight: false,
            constants: {
                screen: function() {
                    return $(window).height();
                }
            }
        });
        $(function() {
            skrollr.get().refresh();
        });
    }
}); //END DESKTOP MEDIACHECK

感谢您的任何见解。

Answer 1

$(window).load(function() { /*...*/ });设置对该函数的回调，该函数将在窗口的load事件触发时触发。直到页面加载过程很晚才发生这种情况，不仅加载了HTML和所有脚本和CSS文件，还加载了所有图像。大多数情况下，load是错误的。

mediaCheck调用一旦load回调被设置（在调用该回调之前很久）就会发生。

如果您想在之后仅在中调用mediaCheck回调中的代码，您有两种选择：

添加第二个load处理程序：
```
$(window).load(function() {
    mediaCheck(/*...*/);
});
```
jQuery确保它按照附加顺序触发事件回调。
将mediaCheck电话移至现有的load处理程序。

更有可能，但您想要做的是删除load处理程序（除非等待所有图片确实是目标），将您的script标记移至HTML的最后（在结束</body>标记之前），然后将两位代码依次放在一起：

$("#site-loader").fadeOut("slow", function() {
        $("#site-container").fadeIn("slow");
    });
});
mediaCheck(/*...*/);

如果您无法控制放置script标记的位置，则可以使用jQuery＆＃39; ready代替：

$(document).ready(function() {
    $("#site-loader").fadeOut("slow", function() {
            $("#site-container").fadeIn("slow");
        });
    });
    mediaCheck(/*...*/);
});

Answer 2

不确定我为什么得到了投票，但这对我有用：

$(window).load(function() {
    $("#site-loader").fadeOut("slow", function() {
        $("#site-container").fadeIn("slow");
    });
    if ($(window).width() > 1024) {
        setTimeout(function() {
            var s = skrollr.init({
                beforerender: function(data) {
                    return data.direction == 'down';
                },
                render: function(data) {
                    console.log(data.curTop);
                },
                smoothScroll: false,
                forceHeight: false,
                constants: {
                    screen: function() {
                        return $(window).height();
                    }
                }
            });
            $(function() {
                skrollr.get().refresh();
            });
        }, 3000);
    }
    $(window).on('resize', function() {
        if ($(window).width() <= 1024) {
            skrollr.init().destroy(); 
        }
    });
});

必须使用setTimeout。

按顺序运行功能

2 个答案: