vanilla-lazyload_一款轻量级懒加载工具库

Web前端开发网

fly63.com

首页资源工具文章教程栏目

vanilla-lazyload

网站地址:https://www.andreaverlicchi.eu/vanilla-lazyload

GitHub:https://github.com/verlok/vanilla-lazyload

网站描述:一款轻量级懒加载工具库

访问官网 GitHub

vanilla-lazyload是一个轻量级、灵活的脚本，可将图像、背景、视频、iframe等实现懒加载。

它利用IntersectionObserver api实现延迟加载,支持响应式图片,适用于多种场景。该库代码精简,仅2.4KB,可显著提升网站加载速度和用户体验。

当用户滚动页面时，只有进入可视区域的资源才会被加载，这样可以显著提升页面加载速度，节省用户流量。

核心优势与应用场景

vanilla-lazyload 采用原生 JavaScript 编写，基于 IntersectionObserver API，支持响应式图片，并能启用原生懒加载。其核心优势在于：

性能优化：减少初始加载时间和带宽消耗，提升页面加载速度
兼容性广：支持现代浏览器，同时提供降级方案
灵活性高：可懒加载图片、背景、视频、iframe等多种内容
seo友好：保持内容可索引性，不影响搜索引擎抓取

适用场景包括电商网站商品列表、图片画廊、长文章配图、视频网站等任何包含大量媒体资源的页面。项目源码结构清晰，主要实现位于 src/lazyload.js，包含核心逻辑和API定义。

基础使用方法

html 结构设置

普通图片懒加载：

<img >="真实的图片路径.jpg" alt="图片描述">

带预览图的懒加载：

<img src="小尺寸预览图.jpg" >="高清大图.jpg" alt="图片描述">

响应式图片懒加载：

<img 
     >="默认图片.jpg"
     >="小图.jpg 400w, 中图.jpg 800w, 大图.jpg 1200w"
     >="(max-width: 600px) 100vw, 50vw"
     alt="响应式图片">

使用 picture 标签：

<picture>
  <source media="(min-width: 1200px)" >="大屏图片.jpg">
  <source media="(min-width: 768px)" >="中屏图片.jpg">
  <img >="默认图片.jpg" alt="自适应图片">
</picture>

背景图片懒加载：

<div >="背景图.jpg">内容</div>

视频懒加载：

<video controls >="视频.mp4" >="封面图.jpg">
  您的浏览器不支持视频播放
</video>

iframe 懒加载：

<iframe >="嵌入页面.html"></iframe>

JavaScript 引入和初始化

最简单的方式（CDN引入）：

<!DOCTYPE html>
<html>
<head>
    <title>懒加载示例</title>
</head>
<body>
    <!-- 你的懒加载内容 -->
    <img >="image1.jpg" alt="图片1">
    <img >="image2.jpg" alt="图片2">
    
    <!-- 在页面底部引入 LazyLoad -->
    <script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@19.1.3/dist/lazyload.min.js"></script>
    <script>
        var lazyLoadInstance = new LazyLoad({
            // 可以在这里添加自定义配置
        });
    </script>
</body>
</html>

使用 ES6 模块方式：

<script type="module">
  import LazyLoad from "https://cdn.jsdelivr.net/npm/vanilla-lazyload@19.1.3/+esm";
  
  const lazyLoadInstance = new LazyLoad();
</script>

高级配置和技巧

常用配置选项

const lazyLoadInstance = new LazyLoad({
    // 元素进入视口多少像素时开始加载
    threshold: 0,
    // 提前开始加载的距离（像素）
    thresholds: "0px",
    // 自定义容器，用于滚动区域不是整个窗口的情况
    container: document.getElementById("scrollingPanel"),
    // 是否使用浏览器原生懒加载（如果支持）
    use_native: false,
    // 加载成功后的回调
    callback_loaded: (element) => {
        console.log("图片加载完成", element);
    },
    // 加载失败的回调
    callback_error: (element) => {
        console.error("图片加载失败", element);
        // 可以设置备用图片
        element.src = "fallback.jpg";
    }
});

处理动态内容

如果你的内容是通过 AJAX 或 JavaScript 动态添加的，需要手动更新 LazyLoad：

// 初始化
var lazyLoadInstance = new LazyLoad();

// 当动态添加新内容后
function loadNewContent() {
    // 模拟动态加载内容
    document.getElementById("container").innerHTML += 
        '<img alt="新图片">';
    
    // 重要：告诉 LazyLoad 检查新内容
    lazyLoadInstance.update();
}

处理滚动容器

如果你的页面有独立的滚动区域：

<div>
    <img >="image1.jpg" alt="图片1">
    <img >="image2.jpg" alt="图片2">
    <!-- 更多内容 -->
</div>

<script>
    var lazyLoadInstance = new LazyLoad({
        container: document.querySelector('.scroll-container')
    });
</script>

错误处理

var lazyLoadInstance = new LazyLoad({
    callback_error: (img) => {
        // 设置备用图片
        if (img.hasAttribute("srcset")) {
            img.setAttribute("srcset", "fallback@1x.jpg 1x, fallback@2x.jpg 2x");
        }
        img.setAttribute("src", "fallback.jpg");
        // 移除懒加载类，避免重复尝试
        img.classList.remove("lazy");
    }
});

css 样式优化

隐藏加载前的 alt 文本

/* 隐藏还没有加载的图片的 alt 文本 */
img:not([src]):not([srcset]) {
    visibility: hidden;
}

/* 添加加载过渡效果 */
.lazy {
    opacity: 0;
    transition: opacity 0.3s;
}

.lazy.loaded {
    opacity: 1;
}

自定义加载动画

.lazy {
    background: #f0f0f0;
    position: relative;
}

/* 加载指示器 */
.lazy:not([src]):not([srcset])::after {
    content: "加载中...";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #999;
}

实际应用示例

电商商品列表

<div>
    <div>
        <img >="product1.jpg" alt="商品1">
        <h3>商品标题1</h3>
        <p>商品描述</p>
    </div>
    <div>
        <img >="product2.jpg" alt="商品2">
        <h3>商品标题2</h3>
        <p>商品描述</p>
    </div>
    <!-- 更多商品 -->
</div>

<script>
    var productLazyLoad = new LazyLoad({
        threshold: 100, // 提前100像素开始加载
        callback_loaded: (el) => {
            el.classList.add('loaded');
        }
    });
</script>

图片画廊

<div>
    <img >="gallery1-large.jpg" >="gallery1-small.jpg 400w, gallery1-large.jpg 800w" alt="画廊图片1">
    <img >="gallery2-large.jpg" >="gallery2-small.jpg 400w, gallery2-large.jpg 800w" alt="画廊图片2">
    <!-- 更多图片 -->
</div>

新闻文章页面

<article>
    <h1>文章标题</h1>
    <img >="featured-image.jpg" alt="特色图片">
    <div>
        <p>文章内容...</p>
        <img >="inline-image1.jpg" alt="内联图片1">
        <p>更多内容...</p>
    </div>
</article>

性能优化建议

合理设置阈值：根据页面布局调整 threshold 值
使用预览图：为大型图片提供小尺寸预览图
图片格式优化：使用 WebP 等现代图片格式
响应式图片：为不同屏幕尺寸提供合适的图片
错误处理：确保加载失败时有合适的降级方案

兼容性说明

支持所有现代浏览器
如果需要支持 IE11，请使用 17.9.0 或更早版本
建议配合 polyfill 使用以获得更好的兼容性

总结

LazyLoad 是一个简单易用但功能强大的懒加载解决方案。通过合理使用，可以显著提升网站性能，改善用户体验。记住关键点：使用 >src，初始化 LazyLoad 实例，动态内容记得调用 update() 方法。

开始使用 LazyLoad，让你的网站加载更快，用户体验更好！

仅供个人学习参考/导航指引使用，具体请以第三方网站说明为准，本站不提供任何专业建议。如果地址失效或描述有误，请联系站长反馈～感谢您的理解与支持！

链接: https://fly63.com/nav/4808

more>>