js(es5)实现图片懒加载

最新推荐文章于 2022-05-25 10:40:31 发布

Out0fRange

最新推荐文章于 2022-05-25 10:40:31 发布

阅读量319

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 轮子懒加载

本文链接：https://blog.youkuaiyun.com/Out0fRange/article/details/108239967

JavaScript 同时被 3 个专栏收录

2 篇文章

订阅专栏

轮子

2 篇文章

订阅专栏

懒加载

1 篇文章

订阅专栏

本文介绍了一个使用原生JavaScript (ES5) 编写的轻量级图片懒加载插件，源文件仅4KB，压缩后2KB。适用于长页面，通过监听图片的`lazy-src`属性来实现延迟加载，减少不必要的资源请求，提升网页初始化速度。插件依赖Intersection Observer API，针对不完全支持的浏览器需要引入polyfill。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

介绍

这是一个用原生JavaScript(es5)写的图片懒加载插件（模块），并且它足够小，源文件只有4kb，压缩后只有2kb。在长页面场景中，使用图片懒加载是优化网站初始加载速度的一种常见方案。直到用户划到之前不加载可见视图外的图片可以有效减少资源请求链接，给其他必要资源如（js）加载腾出位置。

用法

获取

--yarn--
yarn add lazyload-es5

--git--
git clone https://github.com/1esse/lazyload.git

--npm--
npm i lazyload-es5

浏览器原生

<body>
    <img src="thumbnail.jpg" lazy-src="source.jpg">
    <script src="/node_modules/intersection-observer/intersection-observer.js"></script>
    <script src="./lazyload.js"></script>
    <script type="text/javascript">
        var lazy = lazyLoad() // 调用lazyload函数会返回实例化后的对象原型
        // var lazy = new LazyLoad() // 另一种实例化方式，直接自己new一个
    </script>
</body>

vue

<script>
import { lazyload, LazyLoad } from "lazyload-es5";
export default {
  mounted() {
    this.lazy = lazyLoad() // 调用lazyload函数会返回实例化后的对象原型
    // this.lazy = new LazyLoad() // 另一种实例化方式，直接自己new一个
  }
};
</script>

此插件会监听所有定义lazy-src属性的图片标签，请务必给所有需要懒加载的图片添加lazy-src属性，并把图片链接赋值给它。懒加载图片的src可链接至缩略图。

插件使用了Intersection Observer API用作监听图片是否进入浏览器视图窗口，如需配置Intersection Observer API属性，请阅读该API的属性文档并在实例化的时候以对象的方式传入参数。

由于各个浏览器对Intersection Observer API的支持情况不同，如需兼容多浏览器（如ie），需要下载polyfill实现的Intersection Observer API模块（npm i intersection-observer 或者 yarn add intersection-observer），并在此插件执行之前把它引入。原生浏览器参考上文，vue直接下载就行，但要确保该模块与此插件都在node_modules（同一层目录）下，插件会自动将它引入。如果此插件是通过npm或者yarn下载而不是git clone的，则不需要另行下载intersection-observer，因为下载此插件的时候会自动下载其依赖。

API

loadMore()

监听最新的图片资源，新增图片数据并挂载之后可用。

this.$nextTick(() => { 
  this.lazy.loadMore() // 确保图片已挂载之后再调用此方法监听新图片
})

destory(load_complete)

取消监听所有图片，参数load_complete若为真，加载剩余所有图片，为假则不加载。

this.lazy.destory(true) // 取消监听并加载所有图片