@axe/lazy-load-img

A library of lazy load image when it is necessary.

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
@axe/lazy-load-img
Minified + gzip package size for @axe/lazy-load-img in KB

Readme

lazy-load-img

version

A library of lazy load image when it is necessary.

Usage

import LazyLoadImg from '@axe/lazy-load-img'

const clientWidth = document.documentElement.clientWidth

const lazy = new LazyLoadImg({
  el: '#root',
  lazyOffsetTop: 500,
  placeholderImg: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1522823157174&di=1e111a44baa77ea6c6940bac60418607&imgtype=0&src=http%3A%2F%2Fpic2.16pic.com%2F00%2F20%2F02%2F16pic_2002642_b.jpg',
  onImgLoad (img, w, h) {
    img.style.width = clientWidth + 'px'
    img.style.height = (clientWidth * h / w) + 'px'
  }
})

// when new img is append, query img again.
// lazy.init()

// trigger img render by yourself
// lazy.update()
<div id="root">
  <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1522823157174&di=1e111a44baa77ea6c6940bac60418607&imgtype=0&src=http%3A%2F%2Fpic2.16pic.com%2F00%2F20%2F02%2F16pic_2002642_b.jpg" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1522822737689&di=a79f9474b9f6cc0214eab838e0bde792&imgtype=0&src=http%3A%2F%2Fi4.download.fd.pchome.net%2Fg1%2FM00%2F12%2F04%2FoYYBAFZS2uaIR_NiADNPLO6oiewAACx_gAAyJkAM09E943.jpg">
  <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1522823157174&di=1e111a44baa77ea6c6940bac60418607&imgtype=0&src=http%3A%2F%2Fpic2.16pic.com%2F00%2F20%2F02%2F16pic_2002642_b.jpg" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1522822737689&di=abe6d3c80becf701290827252b9d6802&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2Fattachments2%2F201402%2F22%2F221511qk8efdidtf3ftqez.jpg">
  <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1522823157174&di=1e111a44baa77ea6c6940bac60418607&imgtype=0&src=http%3A%2F%2Fpic2.16pic.com%2F00%2F20%2F02%2F16pic_2002642_b.jpg" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1522822737689&di=64bae06f399df98ca7ec0932eb9c08b1&imgtype=0&src=http%3A%2F%2Fimg5.duitang.com%2Fuploads%2Fitem%2F201212%2F14%2F20121214223133_jYzPn.jpeg">
  <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1522823157174&di=1e111a44baa77ea6c6940bac60418607&imgtype=0&src=http%3A%2F%2Fpic2.16pic.com%2F00%2F20%2F02%2F16pic_2002642_b.jpg" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1522822737688&di=f5fac86ad1b0e9e37f46a647ca981a92&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F35a85edf8db1cb1353fd8b78de54564e93584bc0.jpg">
  <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1522823157174&di=1e111a44baa77ea6c6940bac60418607&imgtype=0&src=http%3A%2F%2Fpic2.16pic.com%2F00%2F20%2F02%2F16pic_2002642_b.jpg" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1522822737688&di=c20cb964c24d5832e6a61e6ee39883c5&imgtype=0&src=http%3A%2F%2Fimg4.duitang.com%2Fuploads%2Fitem%2F201212%2F14%2F20121214224334_wdc3v.jpeg">
  <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1522823157174&di=1e111a44baa77ea6c6940bac60418607&imgtype=0&src=http%3A%2F%2Fpic2.16pic.com%2F00%2F20%2F02%2F16pic_2002642_b.jpg" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1522822737687&di=2a92f3b107ac92dce2df419c6fe0f4bd&imgtype=0&src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201402%2F21%2F120044k1dgtgc4dg2dm5tw.jpg">
  <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1522823157174&di=1e111a44baa77ea6c6940bac60418607&imgtype=0&src=http%3A%2F%2Fpic2.16pic.com%2F00%2F20%2F02%2F16pic_2002642_b.jpg" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1522822737687&di=c6d6faaf0ac9fc41fd57cbe8b1b58ec8&imgtype=0&src=http%3A%2F%2Fattimg.dospy.com%2Fimg%2Fday_120403%2F20120403_ff7d00e3c8890ac99d0ft829Pq8AcoeE.jpg">
  <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1522823157174&di=1e111a44baa77ea6c6940bac60418607&imgtype=0&src=http%3A%2F%2Fpic2.16pic.com%2F00%2F20%2F02%2F16pic_2002642_b.jpg" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1522822872691&di=2bbd39ca36324c424358651550aefe88&imgtype=jpg&src=http%3A%2F%2Fimg4.imgtn.bdimg.com%2Fit%2Fu%3D1726406314%2C3724043308%26fm%3D214%26gp%3D0.jpg">
  <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1522823157174&di=1e111a44baa77ea6c6940bac60418607&imgtype=0&src=http%3A%2F%2Fpic2.16pic.com%2F00%2F20%2F02%2F16pic_2002642_b.jpg" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1522822737686&di=ccef9ebafd31343b381b4fed3dd158d4&imgtype=0&src=http%3A%2F%2Fattimg.dospy.com%2Fimg%2Fday_120721%2F20120721_b827a9d749e4d5da6bf6686626zZVAXV.jpg">
  <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1522823157174&di=1e111a44baa77ea6c6940bac60418607&imgtype=0&src=http%3A%2F%2Fpic2.16pic.com%2F00%2F20%2F02%2F16pic_2002642_b.jpg" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1522822737686&di=f11edc29433a97ef738b1cadd0379a17&imgtype=0&src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fwallpaper%2F1308%2F13%2Fc0%2F24431877_1376375393214.jpg">
</div>

API

LazyLoadImg

It will find img with data-src by default.

options

  • el: [HTMLElement|string] -> '#id', '.class'
  • scrollEl: [HTMLElement|string] -> '#id', '.class'
  • lazyOffsetTop = 0: [number] load img when scrollTop less than view area
  • placeholderImg: [string] ensure placeholderImg already loaded before load real img
  • cutTime: [number] throttle wait time
  • onImgLoad: [function] when a img loaded, it will be trigger
    • img: HTMLElement
    • originalWidth: img width
    • originalHeight: img height

lazyLoadImg.init

when new img is append, init and new img will be render on necessary.

lazyLoadImg.update

render img by yourself, but as usual you needn't use it, because it is automatic.

Build Setup

# serve with hot reload at localhost:5000
fle dev

# build for production with minification
fle build

For detailed explanation, consult the docs for fle-cli.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.