html-type=submit 导致页面重新加载_lozad.js——高性能的纯JavaScript轻量级懒加载器...

什么是懒加载？

在Web开发中经常会遇到一些性能问题，有很多原因就是因为一次性请求过多导致的，而懒加载是一种在不影响原有界面，当界面需要展现给用户才进行加载和请求，常见的就是图片的加载，在很多电商页面中最常见，通过懒加载的方式提升了页面的性能，用户体验也会更好了。

为什么使用lozad.js

现有的延迟加载库依赖窗体的滚动事件，或者使用定期计时器并调用在需要延迟加载的元素上getBoundingClientRect()。然而，这种方法非常缓慢，因为每次调用getBoundingClientRect()强制浏览器重新布局整个页面而lozad.js不依赖这些，因此性能很好。

lozad.js介绍

• Github地址

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

lozad.js是使用纯JavaScript实现的不借助图像或iframe的高性能且轻量级可配置延迟加载器，它的思想是观察者模式

特点

• 纯js实现
• 非常轻量，压缩后只有1.04kb
• 零依赖
• 允许延迟加载动态添加的元素
• 支持图片、iframe、视频、音频、背景图片等
• 免费开源

最新版本在于有基础上性能得到了极大地提升。

安装使用

• 安装

npm install --save lozad

//OR

yarn add lozad

//OR

bower install lozad

• 使用

// using ES6 模块

import lozad from 'lozad'

// using CommonJS 模块

var lozad = require('lozad')

或者直接引用cdn或本地js

举例：

html：

js:

const observer = lozad(); // '.lozad'作为默认类选择器observer.observe();

自己引入dom：

const el = document.querySelector('img');const observer = lozad(el); document.querySelectorAll()observer.observe();

自定义配置：

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

背景图片：

IFrame：

更多使用实例参考Github，提供了图片、背景图等使用方式

浏览器支持

支持大多数浏览器，如果不支持需要引入polyfill

总结

提升Web页面的性能方法多种多样，懒加载就是其中一种，如果你追求极致的性能，不妨试一试lozadjs，期待对你有所帮助！