一段代码，如何解决图片懒加载的优雅需求？

原创

繁依Fanyi

发布于 2024-11-20 22:38:36

3931

在文章开始之前，推荐一些很值得阅读的好文章！感兴趣的也可以去看一下哦！

今日推荐：Spring AI再更新：如何借助全局参数实现智能数据库操作与个性化待办管理

文章链接：https://cloud.tencent.com/developer/article/2464797

这篇文章详细介绍了Spring AI的新特性，特别是如何利用全局参数实现CRUD操作和个人待办管理，内容深入、实用性强，对开发者理解智能数据库交互和Spring AI的应用有很大帮助。

当一个页面充满了精美图片时，为了让用户体验更流畅，并避免加载所有图片导致页面卡顿或带宽浪费，图片懒加载便成为了救星。而这其中，滚动加载 和 分页控制 是实现懒加载的核心策略。通过监听用户滚动位置动态加载图片，加之对图片数据的分页处理，我们能够在性能与体验之间找到平衡。

滚动加载：捕捉“即将抵达”的瞬间

滚动加载的思路并不复杂，但要让它既灵敏又高效，需要关注细节。想象一个用户快速向下滚动时，如果我们实时捕捉滚动事件，并不断检查是否需要加载新图片，很可能造成性能瓶颈。为此，我们需要为滚动事件添加触发阈值。

在这段代码中，handleScroll 方法负责监听滚动事件，并判断用户是否接近页面底部：

handleScroll() {
  const { scrollTop, clientHeight, scrollHeight } = this.$el;

  // 当滚动位置接近底部 200px 时，触发加载逻辑
  if (!this.isLoading && this.currentPage <= this.totalPages && scrollTop + clientHeight >= scrollHeight - 200) {
    this.fetchImages();
  }
}

scrollTop 是滚动条距离顶部的高度。
clientHeight 是可见区域的高度。
scrollHeight 是整个内容区域的总高度。

一旦用户的滚动位置触及scrollHeight - 200的阈值，就会调用fetchImages加载下一批图片。在这里，“200”是一个灵活的值，可以根据页面滚动速度和内容动态调整。

分页控制：从无尽中寻找秩序

为了避免一次性加载过多图片，分页机制将图片数据分块加载。通过 currentPage 和 perPage 两个变量，我们能够清晰地知道当前加载到了第几页，以及每页需要加载的图片数量。

图片分页加载的核心逻辑

async fetchImages() {
  if (this.isLoading) return;

  this.isLoading = true; // 防止重复加载

  try {
    const response = await axios.post("/get-gallery-images", {
      id: this.galleryId.id,
      gallery: this.galleryId.name,
      page: this.currentPage,
      page_size: this.perPage,
    });

    const { images, total } = response.data;

    // 为每张图片生成唯一 ID
    const imagesWithId = images.map((image, index) => ({
      ...image,
      id: `${this.currentPage}-${index}`,
    }));

    this.images = [...this.images, ...imagesWithId]; // 合并新旧图片
    this.totalPages = Math.ceil(total / this.perPage); // 计算总页数
    this.currentPage++; // 更新页码
  } catch (error) {
    console.error("获取图片失败:", error);
  } finally {
    this.isLoading = false;
  }
}

分页请求：通过将 currentPage 和 perPage 发送至服务器，我们精确地请求当前所需的图片数据。
动态合并数据：每次请求新图片后，将其拼接到现有的 images 数组中，确保新旧图片能无缝显示。
总页数计算：利用总图片数量与每页显示数量，推导出整个页面需要的总页数。

思路的扩展：为体验注入灵动

动态调整 `perPage`

用户使用不同设备时，屏幕尺寸和分辨率会有较大差异。因此，每页加载的图片数量也不应固定。通过计算屏幕高度与网格列数，我们能够灵活设置 perPage：

calculatePerPage() {
  const itemHeight = 200; // 每个图片块的高度
  const screenHeight = window.innerHeight; // 屏幕高度
  const itemsPerColumn = Math.floor(screenHeight / itemHeight);

  const itemsPerRow = this.$el
      ? Math.floor(this.$el.offsetWidth / 150) // 根据容器宽度动态计算每行显示的图片数
      : 1;

  this.perPage = itemsPerColumn * itemsPerRow;
}

这个方法在页面初始化和窗口大小变化时触发，确保页面无论在哪种设备上都能高效显示。

通过滚动加载捕捉用户的交互意图，通过分页控制分步加载数据，这种懒加载方案不仅能有效缓解性能压力，还能提供流畅的用户体验。在实现的过程中，代码与逻辑的结合需要我们持续优化，为每一帧滚动画面注入丝滑的灵动感。

后端代码地址：繁依Fanyi/go-random-image

前端代码地址：繁依Fanyi/go-random-image-vue

代码略乱，后续会改；如有帮助，还请star ⭐。

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

腾讯技术创作特训营S10

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

腾讯技术创作特训营S10

登录后参与评论

0 条评论

热度