Preload/Lazyload 图像在用户向下滚动页面时使用 Javascript
Preload/Lazyload Images using Javascipt as user scrolls down a page
编辑： 解决了它，我想要的与延迟加载无关。我将保留原始问题和 post 原样，但删除了摘录（因为摘录几乎毫无意义，我将在 codesandbox.io 上将其删除）。我想出的答案在问题下面。
一位用户访问了一个包含 20 张图片的页面。但是我不希望所有图片都立即加载，因为如果图片很大或者图片太多，网站会感觉很慢。
如果用户在某个图像中，则加载该图像并预加载接下来的 5 张图像（例如）而不是其余图像。随着用户滚动，网站将连续加载接下来的 5 张图片。我已经设置了路口观察器以及自定义图像加载组件。
我知道一个解决方案，我在用户滚动时不断调用我的服务器。但是我不喜欢那样，因为它可能太过分了。 （而且是图片 focused/heavy 网站）
最好使用原版 javascript 或 css 解决。如果解决方案可能太复杂，我不介意使用轻量级包。我不知道从哪里开始。
注意：项目 运行 于 Nuxt.js
好吧，感谢 Kissu 的文章，我编写了所需的代码。虽然我想要的与懒惰图像无关，但这篇文章以某种方式给了我如何完成它的提示。这是对交集观察器、条件语句和“v-if”的组合的简单使用，用于渲染该组件
- 设置 intersection Observer 以跟踪用户所在的图像索引。
- 添加一个变量来跟踪用户滚动到的最远图像。所以我们的网站在浏览器上呈现并保留所有以前的图像）
- 设置一个“v-if”来渲染接下来的几张图片。即“v-if”——渲染用户所在索引的图像 + 下一张图像。例如。预加载下 5 张图片
<imageComponent v-if="lastImgViewed+5 > CurrentImage"></imageComponent>
就是这样！简单的！虽然我不知道这样做是否精简或最好的方法 - 性能明智。
编辑： 解决了它，我想要的与延迟加载无关。我将保留原始问题和 post 原样，但删除了摘录（因为摘录几乎毫无意义，我将在 codesandbox.io 上将其删除）。我想出的答案在问题下面。
一位用户访问了一个包含 20 张图片的页面。但是我不希望所有图片都立即加载，因为如果图片很大或者图片太多，网站会感觉很慢。
如果用户在某个图像中，则加载该图像并预加载接下来的 5 张图像（例如）而不是其余图像。随着用户滚动，网站将连续加载接下来的 5 张图片。我已经设置了路口观察器以及自定义图像加载组件。
我知道一个解决方案，我在用户滚动时不断调用我的服务器。但是我不喜欢那样，因为它可能太过分了。 （而且是图片 focused/heavy 网站）
最好使用原版 javascript 或 css 解决。如果解决方案可能太复杂，我不介意使用轻量级包。我不知道从哪里开始。
注意：项目 运行 于 Nuxt.js
好吧，感谢 Kissu 的文章，我编写了所需的代码。虽然我想要的与懒惰图像无关，但这篇文章以某种方式给了我如何完成它的提示。这是对交集观察器、条件语句和“v-if”的组合的简单使用，用于渲染该组件
- 设置 intersection Observer 以跟踪用户所在的图像索引。
- 添加一个变量来跟踪用户滚动到的最远图像。所以我们的网站在浏览器上呈现并保留所有以前的图像）
- 设置一个“v-if”来渲染接下来的几张图片。即“v-if”——渲染用户所在索引的图像 + 下一张图像。例如。预加载下 5 张图片
<imageComponent v-if="lastImgViewed+5 > CurrentImage"></imageComponent>
就是这样！简单的！虽然我不知道这样做是否精简或最好的方法 - 性能明智。