1.0.1 • Published 7 years ago
lzimg-load v1.0.1
lzimg-load
lazy load images with data-lzimg attr
using
Using lzimg-load.js
is simple, to add an image into the page,add a data-lzimg
attribute to the img tag, that's all.
<body>
<ul>
<li><img src='./images/loading.gif' data-lzimg="./images/aqua_flower_cfe38ea1e3.jpg"></li>
<li><img src='./images/loading.gif' data-lzimg="./images/blue_smoke_e31ba2279b.jpg"></li>
<li><img src='./images/loading.gif' data-lzimg="./images/colorful_abstract_5ab2b1865f.jpg"></li>
<li><img src='./images/loading.gif' data-lzimg="./images/tower_754c148370.jpg"></li>
<li><img src='./images/loading.gif' data-lzimg="http://7xjp74.com1.z0.glb.clouddn.com/1.JPG"></li>
<li><img src='./images/loading.gif' data-lzimg="./images/golden_background_47287f7d11.jpg"></li>
<li><img src='./images/loading.gif' data-lzimg="./images/aqua_leaves_c619cd2cdf.jpg"></li>
<li><img src='./images/loading.gif' data-lzimg="./images/color_crazy_327ad5ab60.jpg"></li>
<li><img src='./images/loading.gif' data-lzimg="./images/jirafa13_4608e4c086.jpg"></li>
<li><img src='./images/loading.gif' data-lzimg="./images/molten_glass_99297a6d12.jpg"></li>
<li><img src='./images/loading.gif' data-lzimg="./images/rainbow_mosaic_ed190cb590.jpg"></li>
<li><img src='./images/loading.gif' data-lzimg="./images/color_tea_93f3056137.jpg"></li>
<li><img src='./images/loading.gif' data-lzimg="./images/grunge_banners_708e19eaf0.jpg"></li>
<li><img src='./images/loading.gif' data-lzimg="./images/stained_glass_79bc039d3d.jpg"></li>
<li><img src='./images/loading.gif' data-lzimg="./images/love_pendant_1674098af0.jpg"></li>
<li><img src='./images/loading.gif' data-lzimg="./images/candies_83d4e9ed06.jpg"></li>
<li><img src='./images/loading.gif' data-lzimg="./images/aqua_butterfly_15146b5c6d.jpg"></li>
<li><img src='./images/loading.gif' data-lzimg="./images/grunge_abstract_4aaf36f6ac.jpg"></li>
</ul>
<script src="../src/lzimg-load.js"></script>
</body>
Checkout a demo