lazyload.js 懒惰加载框架下载及使用
🖥 lazyload.js 懒加载框架下载及使用指南 一、概述 LazyLoad.js 是一款轻量级 JavaScript 图片懒加载库。 作用 :页面初次加载只渲染可视区域的图片,滚动到图片位置时再加载,提升页面性能和加载速度。 官方仓库(GitHub): https://github.com/verlok/lazyload 二、下载方式 1. 使用 npm 安装 npm install vanilla-lazyload php 28 Bytes © 菜鸟-创作你的创作 2. 直接引入 CDN < script src= "https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.6.1/dist/lazyload.min.js" >< /script > php 97 Bytes © 菜鸟-创作你的创作 3. GitHub 下载 地址: https://github.com/verlok/lazyload 下载 lazyload.min.js 放入项目目录即可使用。 三、HTML 图片设置 图片 src 使用占位图或空值,真实图片地址放在 data-src 属性中: < img class = "lazy" data-src= "example.jpg" alt= "示例图片" width= "300" height= "200" > php 77 Bytes © 菜鸟-创作你的创作 四、JavaScript 初始化 // 初始化 LazyLoad var lazyLoadInstance = new LazyLoad ({ elements_selector: ".lazy" , // 懒加载图片选择器 threshold: 300, // 距离可视区多少像素开始加载 effect: "fadeIn" , // 加载效果 callback_enter: function ( element ) { ...