Question

所以这是我从之前对某人问题的回答中获得的代码。

$(document).load($(window).bind("resize", listenWidth));

            function listenWidth( e ) {
                if($(window).width()<500)
                {
                    $("#sidebar").remove().insertBefore($(".page"));
                } else if ($(window).width()>500) {
                    $("#sidebar").remove().insertBefore($(".introTop"));
                }
            }

所以这一切都很好，并且在调整大小时改变了位置，但是当它加载并且屏幕已经小于500px时，在我调整页面大小之前它没有做任何事情。

这可以修复，因此它会在加载时初始化并相应地放置我的元素以及监听调整大小吗？

提前致谢，

彼得。

Answer 1

您应该在页面加载时使用绑定resize事件和trigger()

$(window).load(function() {
    $(window).on("resize", function(e) { //Bind resize
        if ($(window).width() < 500) {
            $("#sidebar").remove().insertBefore($(".page"));
        } else if ($(window).width() > 500) {
            $("#sidebar").remove().insertBefore($(".introTop"));
        }
    }).trigger("resize"); //Trigger on page load
});

Answer 2

只需激活文档准备好的功能....

$(function() {
  $(document).load($(window).bind("resize", listenWidth));
  listenWidth();
});

Answer 3

是的当然

$(document).ready(function(){
    listenWidth(e);
});

这适用于文件准备

Answer 4

首先，您不需要将它包装在DOM中。然后你就可以触发它：

$(window).bind("resize", listenWidth).trigger('resize');

Answer 5

或者您可以在窗口加载

上编写代码

$(window).on('resize', function(e){
    listenWidth(e);
});
$(window).load(function(e){
    $(window).trigger('resize');
});

在页面加载jQuery上更改元素位置

5 个答案: