建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

JS图片懒加载插件lozad.js

来源:易助科技网浏览量:14收藏

简介


Lozad.js 是基于 IntersectionObserver API 的轻量级、高性能、可配置的纯 JavaScript并且无依赖的懒加载器,其能够被用于进行图片、iframe 等多种形式的元素。通过gzip压缩过后,仅仅535字节大小,相对于常用的jquery.lazyload.js来说,lozad.js实力碾压,虽然jquery.lazyload.js也才几kb大小。


JS图片懒加载插件lozad.js-示例图



使用


1.  引入 Lozad.js 文件


2.  HTML


<img />


3.  调用


// 基础使用
const observer = lozad();

// 元素默认为 '.lozad'
observer.observe();

// 个性配置
const observer = lozad('.lozad',{
  rootMargin: '30px 0px',
  threshold: 1}
);
observer.observe();

// 添加生命周期
const observer = lozad('.lozad', {
  load: function(el) {
    // 生命周期:加载图片前
    console.log(el.getAttribute('>        // 需要自定义图片src        el.src = el.getAttribute('>    },
    loaded: function (el) {
      // 加载完毕,实际图片还在pending中,页面还没显示图片
      console.log(el.getAttribute('>        console.log(el)    }})

observer.observe() 
// 加载,如果有新图片加入,再次执行即可



相关链接


npm 地址 :https://www.npmjs.com/package/lozad

GitHub 地址 :https://github.com/ApoorvSaxena/lozad.js

效果演示:  https://apoorv.pro/lozad.js/demo/