lozad.js：懒加载神器

Magicer 发布于2019-08-21 17:00 / 2442人阅读

摘要：是基于的轻量级高性能可配置的纯并且无依赖的懒加载器，其能够被用于进行图片等多种形式的元素。在上，至今短短的一个月的时间，已经收获了的。传送门阮一峰老师使用教程懒加载懒加载其实就是延迟加载。

Lozad.js 是基于 IntersectionObserver API 的轻量级、高性能、可配置的纯 JavaScript并且无依赖的懒加载器，其能够被用于进行图片、iframe 等多种形式的元素。通过gzip压缩过后，仅仅535字节大小，相对于常用的jquery.lazyload.js来说，lozad.js实力碾压，虽然jquery.lazyload.js也才几kb大小。在github上，至今短短的一个月的时间，已经收获了2300+的star。

传送门：阮一峰老师IntersectionObserver使用教程

懒加载

懒加载其实就是延迟加载。通俗的讲就是，当你访问一个页面的时候，先不设置img元素或者其他元素的background-image的图片的src（还有其他的懒加载形式），只有当它们进入视口的才开始加载，这样可能节省带宽从而提高网页性能，页面加载速度更加快、减轻服务器的压力。

一般懒加载实现的方法为不设置资源文件的src，而把真是的url放置在data-url（也可根据自己喜好设置）属性里面，这样在载入页面的时候不会对资源文件发起请求。当网页滚动条滚动到需要加载这个标签的时候，设置真实的url从而开始加载资源文件。

lozad 安装

$ npm install --save lozad
//or
$ yarn add lozad
//or
$ bower install lozad

然后根据ES6标准或者CommonJS的规范将lozad模块引入，当然也可以用CDN引入

使用

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

接下来，你所要做的就仅仅只是将lozad实例化

const observer = lozad();
observer.observe();

或者使用个性化设置：

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

rootMargin和threshold均为IntersectionObserver的参数，具体使用参考阮一峰老师的教程吧。

要是你想要在加载该元素的同时执行某些函数时：

lozad(".lozad",{
  load: function(el){
      console.log("loading element");
  }
});

相似的，当你使用背景图片的时候，你可以这么操作：

以上就是lozad的基本用法了，显而易见，lozad相当的便捷。

兼容性

但是lozad也并不是没有缺点。因为它使用了IntersectionObserver的API，导致兼容性不好，chrome也刚从51版本开始使用，更不用说那些上古年代的浏览器了。

PC端兼容性：

移动端兼容性：

文章同步于个人小站

云服务器 GPU云服务器懒加载懒加载异常 javascript懒加载懒加载session

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88997.html

前端周报：前端面试题及答案总结；JavaScript参数传递的深入理解

摘要：前端面试题及答案总结掘金技术征文金三银四，金九银十，用来形容求职最好的几个月。因为的存在，至少在被标准化的那一刻起，就支持异步编程了。然而异步编程真正发展壮大，的流行功不可没。 showImg(https://segmentfault.com/img/bVVQOH?w=640&h=319); 1、2017前端面试题及答案总结 |掘金技术征文金三银四，金九银十，用来形容求职最好的几个月...

ermaoL 2019-08-21 16:46 评论0 收藏0
一个高仿追书神器的vue阅读器。已成功做成app

摘要：原创，基本上是界面，新加了七八个功能，解决了前辈阅读器上的绝大部分，并成功添加路径打包成。毕竟只是一个学习项目跨域问题本次开发使用的是代理追书神器，是不需要后台认证直接可以跨域的接口，以实现在移动端显示的效果。应届毕业生，目前正在找工作，简历需要所以开发了这个app。刚开始开发也是一脸懵逼，因为没得后台，一些逻辑功能也不知道怎么拓展。好在看到了追书神器api接口，顿时让我决心做出这一...

miracledan 2019-08-22 18:18 评论0 收藏0
react-router4 +react-loadable 实现Code Splitting

摘要：之前在中文官方文档使用的是。实现按需加载，升级之后，这个方法就走不通了。之后看了的官网，按需加载只需要神器。之前在react-router中文官方文档使用的是require。ensure实现按需加载，升级之后，这个方法就走不通了。之后看了react-router的官网，按需加载只需要神器 react-loadable 。react-loadable的好处：基于import()的自...

BaronZhang 2019-08-22 16:58 评论0 收藏0
前端技术要点

摘要：函数节流使得一定时间内只触发一次函数。区别函数节流不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而函数防抖只是在最后一次事件后才触发一次函数。这样的场景，就适合用节流技术来实现。需要注意一点，服务端也要支持。原文 https://github.com/Ritr/mark/... js 闭包要理解闭包，首先要知道javascript的作用域。通常ja...

Loong_T 2019-08-23 16:22 评论0 收藏0