一个好用的懒加载插件Lozad.js

CDN:<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.js"></script>
用法:

在html中,给需要懒加载的元素加上lozad的类名,并将src改为data-src,如下所示:

图片img标签:
<img class='lozad' data-src='image.png' />

图片背景图:

<div class='lozad' data-background-image='image.png'></div>

最后实例化:
const observer = lozad();
observer.observe();

const observer = lozad('.lozad',{
  rootMargin: '10px 0px',
  threshold: 0.1
});
observer.observe();
 

github:https://github.com/ApoorvSaxena/lozad.js

缺点:兼容性不好
posted @ 2019-08-09 09:56  阳光下丶  阅读(584)  评论(0编辑  收藏  举报