微信小程序图片懒加载插件

一、插件（文件存放位置：/components/loader/）

1、img-loader.js

Component({properties: {},data: {imgs: [],list: [],success: function () {}},lifetimes: {attached() {}},methods: {//加载load(opts) {const that = thisconst imgs = opts.imgs || []const success = opts.success || function () {}that.setData({imgs: imgs,success: success}, () => {that.callBack()})},//初始回调callBack() {const that = thisconst list = that.data.listlist.forEach(item => {if (item.loaded) {that.data.success(item)}})},//成功回调imgOnLoad(e) {const that = thisconst src = e.currentTarget.dataset.srcconst width = e.detail.widthconst height = e.detail.heightlet list = that.data.listlet has = falselist = list.map(item => {if (src == item.src) {has = trueitem.loaded = true}return item})if (!has) {list.push({src: src,width: width,height: height,loaded: true})}that.setData({list: list}, () => {that.data.success({src: src,width: width,height: height,loaded: true})})},//错误回调imgOnLoadError(e) {const that = thisconst src = e.currentTarget.dataset.srcthat.data.success({src: src,loaded: false})}},attached() {}
})

2、img-loader.json

{"component": true,"usingComponents": {}
}

3、img-loader.wxml

<image wx:for="{{imgs}}" wx:key="*this" src="{{item}}" data-src="{{item}}" bindload="imgOnLoad"binderror="imgOnLoadError" class="img-loader"></image>

4、img-loader.wxss

.img-loader {display: none;width: 0;height: 0;opacity: 0;
}

二、插件引用方法

1、wxml

<img-loader id="imgLoader"></img-loader>

2、json

{"usingComponents": {"img-loader": "/components/loader/img-loader"}
}

3、js

const app = getApp()
Page({data: {photoList:[],imgList: []},onLoad() {},onReady() {},onShow() {const that = thisconst actions = [that.getPhotoList()]Promise.all(actions.map((p) => {return p.catch(error => error)})).then(res => {let photoList= that.data.photoListlet imgList = that.data.imgListlet has = falselet loaded = falseif (0 == res[0].errcode) {photoList = res[0].dataphotoList = photoList.map(item => {has = falseloaded = falseimgList.forEach(img => {if (img.url == item.photo_url) {has = trueloaded = img.loaded}})if (!has) {imgList.push({url: item.photo_url,loaded: false})}item.loaded = loadedreturn item})}that.imgLoader = that.selectComponent('#imgLoader')that.setData({photoList: photoList,imgList: imgList}, () => {that.loadImages()})}).catch(error => {})},//获取照片列表getPhotoList() {return app.invokeApi('api_url')},//加载图片loadImages() {const that = thislet photoList = that.data.photoListlet imgList = that.data.imgListlet imgs = imgList.map(item => {return item.url})that.imgLoader.load({imgs: imgs,success: res => {const src = res.srcif (res.loaded) {photoList.forEach((item, index) => {if (src == item.photo_url) {that.setData({['photoList[' + index + '].loaded']: true})}})imgList.forEach((item, index) => {if (src == item.url) {that.setData({['imgList[' + index + '].loaded']: true})}})}}})}
})

微信小程序图片懒加载插件相关推荐

微信小程序--图片懒加载
定义图片懒加载又称图片延时加载.惰性加载,即在用户需要使用图片的时候加载,这样可以减少请求,节省带宽,提高页面加载速度,相对的,也能减少服务器压力.惰性加载是程序人性化的一种体现,提高用户体验,防止 ...
【愚公系列】2022年09月微信小程序-图片懒加载功能实现
文章目录前言一.官方图片的懒加载 1.wxml 2.js 3.css 4.效果二.第三方包实现图片的懒加载 1.安装第三方包 2.组件引用 3.wxml 4.js 5.css 6.效果前言大 ...
微信小程序图片懒加载实现
使用微信提供的 IntersectionObserver 对象 IntersectionObserver 对象,用于推断某些节点是否可以被用户看见.有多大比例可以被用户看见. 在页面渲染开始时,通过这 ...
微信小程序封装懒加载图片
微信小程序封装懒加载图片 js /components/LazyImage/index.js // components/LazyImage/index.js Component({/*** 组件的属 ...
小程序图片懒加载较完美解决方案
无需考虑数据结构,效果如图话不多说,先上代码 wxml <view class="content"><block wx:key="{{img}}&qu ...
微信小程序图片的加载
在微信小程序中,要显示一张图片,有两种图片加载方式: 加载本地图片 <image class="widget__arrow" src="/image/.png&qu ...
微信小程序——图片的加载与获取手机内部的图片
关于将手机里的图片放在上传到小程序,在小程序里这种方法并不陌生,甚至大多数小程序都附带有这种功能,那么这种功能是怎么实现的呢,一起来看看吧!!! 1.微信小程序加载图片的几种方法 1.本地图片的加载 ...
微信小程序 # 图片预加载方案(防闪烁) 以及首次引导
问题背景第一次进入小程序的时候,需要打开引导操作点击进入下一个引导操作,一共有一系列引导操作. 引导操作这里是用图片实现的,然后点一下切换一张图片. 问题具体描述在如上图所示的引导提示操作中,用 ...
小程序图片懒加载放在服务器,【小程序】使用uni-app搭建小程序环境---图片懒加载...
延迟加载的理念:页面初始化时,暂不加载处于屏幕可见区域之外的图片.该方案会有如下几大好处:\n加快页面渲染速度 \n提升页面滚动性能 \n默认不下载屏幕外的图片,减少网络流量主标题列表二级标题 e ...
今天突然发现，微信小程序手机访问正常，PC端访问小程序图片无法加载？
今天突然发现,微信小程序手机访问正常,PC端访问小程序图片无法加载? 所有图片在pc上查看都无法显示. 然后使用抓包工具抓包,pc端图片全部403,结果为 AccessDenied You are d ...

微信小程序图片懒加载插件

微信小程序图片懒加载插件相关推荐

最新文章

热门文章