HBuilder 图片懒加载原始封装
时间: 2023-10-25 11:07:53 浏览: 89
图片懒加载封装方法,下载下来直接用
HBuilder 中可以使用 MUI 框架自带的图片懒加载组件,也可以使用第三方库 lazyload.js 进行图片懒加载。
使用 MUI 框架自带的图片懒加载组件,需要在页面中引入 mui.lazyload.js 文件,并在需要懒加载的图片标签上添加 data-lazyload 属性,指定图片的真实地址,例如:
```html
<img data-lazyload="真实图片地址" src="占位图片地址">
```
使用第三方库 lazyload.js 进行图片懒加载,需要在页面中引入 lazyload.js 文件,并在需要懒加载的图片标签上添加 data-original 属性,指定图片的真实地址,例如:
```html
<img data-original="真实图片地址" src="占位图片地址" class="lazy">
```
同时需要在 JavaScript 中初始化 lazyload.js,例如:
```javascript
$(function() {
$("img.lazy").lazyload();
});
```
以上是图片懒加载的原始封装方式,您可以结合具体需求进行修改。
阅读全文