美文网首页
js实现图片懒加载

js实现图片懒加载

作者: outof | 来源:发表于2020-08-25 18:27 被阅读0次

介绍

这是一个用原生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) // 取消监听并加载所有图片

相关文章

  • 图片懒加载

    前端实现图片懒加载(lazyload)的两种方式 原生JS实现最简单的图片懒加载 30行Javascript代码实...

  • JS

    JS 懒加载,预加载 概念:懒加载也叫延迟加载:JS图片延迟加载,延迟加载图片或符合某些条件时才加载某些图片。预加...

  • js实现图片懒加载

    现如今,网站载有的信息量越来越大,其中图片占据着很大一部分,这样一来可以使整个页以面图文结合的形式展现,更加美观。...

  • js实现图片懒加载

    介绍 这是一个用原生JavaScript(es5)写的图片懒加载插件(模块),并且它足够小,源文件只有4kb,压缩...

  • js实现图片懒加载

    一、图片懒加载原理 浏览器是否发起请求图片是根据 中src的属性,所以实现原理就是在图片没有进入可视区域的时候将图...

  • js 实现图片懒加载

    一、懒加载 懒加载也叫延迟加载,Js中图片的延迟加载,延迟图片需要符合某些条件时才加载;对于图片过多的页面,为了加...

  • js实现图片懒加载

    原生js实现图片懒加载需要的条件1、scroll事件2、元素是否处于可视区域 当scroll事件触发的时候,根据计...

  • JS实现图片懒加载

    第一种 第二种

  • 图片懒加载

    懒加载与预加载的基本概念。 懒加载也叫延迟加载:JS图片延迟加载 延迟加载图片或符合某些条件时才加载某些图片。 预...

  • 常见网站性能优化方法

    1. 尽量减少HTTP请求次数 合并js 合并css 图片sprite 2. 延迟加载内容 图片懒加载 数据懒加载...

网友评论

      本文标题:js实现图片懒加载

      本文链接:https://www.haomeiwen.com/subject/gpizjktx.html