【源码】基于 JavaScript 的富文本图片懒加载插件

项目简介

本项目是基于 JavaScript 开发的图片懒加载插件，专为有富文本展示且需实现图片懒加载的场景设计。它能够有效优化网页性能，通过延迟图片加载的方式，加快页面加载速度，从而提升用户体验。

项目的主要特性和功能

1. 图片懒加载：自动识别并加载页面图片，仅在用户滚动到图片位置时进行加载，减轻页面初次加载负担。
2. 图片占位：要求 img 标签具备 width 和 height 属性，优化用户体验与页面布局。
3. 多方式图片路径压缩：支持阿里 OSS、七牛等云存储图片路径压缩，也可根据配置链接自适应。
4. 可选大图查看功能：开启后，用户点击图片可查看大图。

安装使用步骤

假设用户已下载本项目的源码文件： 1. 引入 JavaScript 文件：在需使用懒加载功能的页面中，引入 stringhtml-lazyload.js 文件。 html <script type="text/javascript" src="/stringhtml-lazyload.js"></script> 2. 调用 strHtmlLazyload 函数：在页面中调用该函数并传入必要参数。 ```javascript // element：dom 对象 // text：富文本内容 // options：调用参数

new strHtmlLazyload(element, text, {
    ableLazyLoad: true, // 开启懒加载，替换图片
    urlResizeType: 'auto', // 图片路径压缩，oss：阿里，qiniu: 七牛， none: 不压缩，auto：根据配置链接自适应,必须填写ossUrlPrefix, qiniuUrlPrefix
    isYojiangApp: false, // 是否是在有讲APP
    imgBigCheck: true,  // 开启点击查看大图事件
    ossUrlPrefix: 'alcdn.yojiang.cn', // 阿里云 OSS 链接域名
    qiniuUrlPrefix: 'img.yojiang.cn', // 七牛链接域名
    defaultLazyPic: '', // 使用默认图片
    ableRatio: false, // 是否开启按屏幕像素比获取图片
});
```

1. 注意事项：使用图片占位功能时，img 标签需包含 width 和 height 属性。例如： html <img src="https://alcdn.yojiang.cn/upload/umeditor/image/20190522/15/c45e6ded3cfa5957" width="640" height="141"/>

下载地址

点击下载 【提取码: 4003】【解压密码: www.makuang.net】