lazy-load-img

A library of lazy load image when it is necessary.

Usage

1import LazyLoadImg from '@axe/lazy-load-img'
2
3const clientWidth = document.documentElement.clientWidth
4
5const lazy = new LazyLoadImg({
6  el: '#root',
7  lazyOffsetTop: 500,
8  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',
9  onImgLoad (img, w, h) {
10    img.style.width = clientWidth + 'px'
11    img.style.height = (clientWidth * h / w) + 'px'
12  }
13})
14
15// when new img is append, query img again.
16// lazy.init()
17
18// trigger img render by yourself
19// lazy.update()

1<div id="root">
2  <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">
3  <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">
4  <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">
5  <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">
6  <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">
7  <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">
8  <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">
9  <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">
10  <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">
11  <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">
12</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

1# serve with hot reload at localhost:5000
2fle dev
3
4# build for production with minification
5fle build

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