简易懒加载

最新推荐文章于 2025-11-27 12:57:01 发布

原创最新推荐文章于 2025-11-27 12:57:01 发布 · 412 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html

笔记同时被 3 个专栏收录

7 篇文章

订阅专栏

6 篇文章

订阅专栏

vue

4 篇文章

订阅专栏

本文介绍了如何利用JavaScript实现图片的懒加载功能。通过监听窗口滚动事件，当图片进入可视区域时，将其显示出来，从而提高网页加载速度并优化用户体验。主要涉及到的知识点包括DOM操作、事件监听和滚动位置判断。

简易图片的懒加载函数

function imgLazyLoad(evet:any = null) {
  const scrollTop = document.documentElement.scrollTop;
  const clientHeight = document.documentElement.clientHeight;
  imgs.value?.forEach((e) => {
    if (
      e.parentElement &&
      e.parentElement?.offsetTop <= scrollTop + clientHeight
    )
      e.style.display = "inline-block";
  });
}
window.addEventListener("scroll", imgLazyLoad);