在滚动

Question

我有一个非常沉重（垂直长）的网页，上面有很多图片。我希望它的上半部分尽可能快地出现。

所以我想只显示靠近顶部的div，并将div的样式/类设置在“display：none;”之下，从而阻止浏览器尝试加载所有图像并且它们可能包含什么，直到通过“display：block;”显示它们当用户开始向下滚动时。

因此我有几个问题：

1. 我的假设是正确的，大多数现代浏览器都不会尝试加载图像（或者最后会加载它们），如果它们位于隐藏的div中，那么它会改善加载时间吗？

2. 我如何通过jQuery实际实现它？我想我将需要一些onscroll的监听器功能，但是我如何在相关的div上显示，而不是那些用户还没有滚动的？也就是说，当用户向下滚动时，div会按顺序显示。

3. 如何处理指向隐藏div的#anchors。如果我将它们设置为保持可见的h标签，当用户点击指向此类锚点的链接时，onscroll函数会处理这种情况吗？

为了清楚起见：基于AJAX的解决方案调用服务器以获取更多内容是不可行的。

谢谢。

Answer 1

我会尽快回答所有三个问题：

隐藏div中的

1. a.f.a.i.k图像无论如何都会加载 - 因此这可能无法帮助您缩短加载时间

2. 这个确切的用例有一个jQuery插件，它很容易实现并且有很好的文档记录：Lazy Load

3. 我不知道指向隐藏div的锚点 - 我想这不起作用。但是使用Lazy Load，您不必实际隐藏 div - 而只是在视图端口（或关闭）内部加载图像

Answer 2

1. 没有。你必须通过预加载图像来做到这一点。这是一个悬停的示例：https://css-tricks.com/snippets/jquery/image-preloader/，您需要的可能是onScroll预加载器。谷歌吧！

2. 一个例子：http://luis-almeida.github.io/unveil/，那里还有更多。