9

我有一个繁忙的网页，里面有很多小部件。有时需要一两秒钟才能加载。

当我从页面顶部以外的某个位置点击刷新时，我可以看到页面加载好像scrollTop==0并且在某些时候突然回到我的原始位置。

问题是我在.ready()事件处理程序中发生了各种初始化，其中一些依赖于scrollTopand scrollLeft。这些初始化发生在文档返回到其原始位置之前，然后从原始位置给出无意义的结果。

将这些初始化包装在.load()事件处理程序中似乎也不起作用。起作用的是通过处理程序内部的 setTimeout 添加（相当长的）延迟.load()。由于显而易见的原因，这是不可取的。

这表明“返回原始位置”独立于标准事件链发生，即。ECMA 标准中未指定或依赖于浏览器实现。

处理仅在浏览器返回原始位置后才需要进行的初始化的最佳方法是什么？有关联事件吗？有什么方法可以识别已经发生刷新并且在这种情况下只会延迟？

我所有的测试都是在 Chrome 和 Firefox 中进行的。

4

2 回答 2

2

“返回原始位置”行为是浏览器作为奖励添加的一项功能，而不是标准化的功能。我认为没有特定事件是“浏览器因页面刷新而滚动”事件。

但是，如果浏览器行为正常，我怀疑它应该在滚动时触发onscroll 事件。window这必然是在页面加载事件之后（因为否则浏览器没有什么可以滚动到的，所以我会在加载事件之后查找滚动事件并推断页面已被浏览器滚动。

请记住，您必须成功处理页面未刷新且未收到 onscroll 事件的情况。因此，我会做的（如果可能的话）是假设页面没有滚动，然后如果你确实得到了 onscroll 事件，请通过重新定位新位置来重新开始。在加载然后重新加载的地方有一点“闪光”，但这将处理回调的异步性质。

于 2013-01-17T18:53:42.910 回答
1

由于这不是标准事件（正如您所说），我建议创建一个可以为您进行快速重复测试的小系统，以确保在加载/刷新后您当前高于该 0 点，然后为您的小部件等运行任何代码。

var scrollTopInterval;

$(window).load(function () {
  var i = 0;

  scrollTopInterval = setInterval( function () {
    console.log( $(window).scrollTop() );

    if ($(window).scrollTop() > 0) {
      weAreReady(); // do stuff, we are ready to go
      clearInterval(t);
    }

    i++;

    // 2 seconds might be way too much (but you said you needed a long delay)
    if (i >= 2000) { clearInterval(scrollTopInterval); }
  }, 1);
});

function weAreReady() {
   alert('we moved down past 0 after refresh');
}

此外，如果用户开始滚动（可能只是第一次加载页面等），请确保我们清除此间隔；

$(window).scroll(function () { 
   clearInterval(scrollTopInterval);
});

这是这个的jsFiddle，当然你不能在jsFiddle中刷新，所以只需将代码复制到一个html文件或其他东西中（这就是我做测试的方式）。

它似乎有效，如果您已经在页面顶部，一切都很好，如果您再往下看，您会看到 0 弹出然后更高的数字，您会立即收到警报（我们调用我们的函数来运行其余部分页）。

于 2013-01-17T18:57:59.633 回答