Question

我在一点点泡菜。

我有一个复杂的页面，它有很多动画根据屏幕的大小而改变。

我使用媒体查询和Jquery根据屏幕大小编辑动画和样式，但是，例如，当用户决定调整屏幕大小时，动画DIV不在其起始位置。有时，我可以搞一些混乱的风格。

所以我想尝试重新加载页面，我想使用.on（＆＃39; mouseup＆＃39;）函数来激活它。

这是为了模拟用户将屏幕大小调整到他们的首选范围，然后重新启动屏幕重新加载。

我试过。（＆＃39;调整大小＆＃39;）但是每次用户在某个范围之间调整大小都会导致重新加载，这可能会降低用户体验，尤其是连接不良时。 / p>

所以这是我对此的尝试，但它不能正常工作。

$(window).on('mouseup', function(){

    if ($(window).width() <=775 && $(window).width() >= 481){
        location.reload();

    } else if ($(window).width() <=480 && $(window).width() >= 300){
        location.reload();

    }

});

正如我发布的那样，我看到了逻辑问题，即使这确实有效。这会触发意外点击，因为窗口中的任何东西都不是窗口的一部分吗？或者它只是浏览器窗口本身的边界。

这样的事情是可能的（＆＃39; mouseup＆＃39;，＆＃39; resize＆＃39;，function（）{}）对不起，如果我发出新闻代码，但我是一个

编辑：我确实尝试了这个鼠标调整大小的建议，就像我放在这里一样，但它没有用。（Probaby，因为我做错了或不可能）

Answer 1

嗯，在同意评论的同时，您不应该重新加载页面。相反，您的应用应该具有状态，并且状态始终可以重置为起始点。

<强> BUT

如果您希望页面只重新加载一次，因为标题建议您可以在localStorage中存储变量。

// check variable was set
var pageReloadedAlready = window.localStorage.getItem('reloaded');

$(window).on('mouseup', function(){

    if ($(window).width() <=775 && $(window).width() >= 481){
        if( ! pageReloadedAlready ){ 
            window.localStorage.setItem( 'reloaded', true ); // set variable to true
            location.reload();
        }
    } else if ($(window).width() <=480 && $(window).width() >= 300){
        if( ! pageReloadedAlready ){
            window.localStorage.setItem( 'reloaded', true );
            location.reload();
        }
    }
});

您希望在一段时间后失效，使其变得更加复杂。

获取重新加载页面调用仅触发一次

1 个答案: