小程序图片懒加载放在服务器,【小程序】使用uni-app搭建小程序环境---图片懒加载...

延迟加载的理念：页面初始化时，暂不加载处于屏幕可见区域之外的图片。该方案会有如下几大好处：\n加快页面渲染速度

\n提升页面滚动性能

\n默认不下载屏幕外的图片，减少网络流量

主标题

列表二级标题

exportdefault{

data() {varimgs=['shuijiao','muwu','cbd']varlist=[]for(let i= 0; i< 20; i++) {

list.push({

src: `https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/${imgs[i%3]}.jpg`,

show:false,

loaded:false})

}return{

windowHeight:0,

placeholderSrc:'/static/kechengfengmianmorentu.png',

list: list,

show:false}

methods: {

load() {

uni.createSelectorQuery().selectAll('.lazy').boundingClientRect((images)=>{

images.forEach((image, index)=>{if(image.top<= this.windowHeight) {this.list[image.dataset.index].show= true;

}

})

}).exec()

imageLoad(e) {this.list[e.target.dataset.index].loaded= true}

onLoad() {this.windowHeight=uni.getSystemInfoSync().windowHeight

onShow() {if(!this.show) {this.show= truesetTimeout(()=>{this.load()

},100)

}

onPageScroll() {this.load()

}

}.placeholder.loaded{opacity:0;

}.uni-media-list-logo{position:relative;

}.uni-media-list-logo .image{position:absolute;

}

小程序图片懒加载放在服务器,【小程序】使用uni-app搭建小程序环境---图片懒加载...相关推荐

uni App 支付宝小程序分享代码
封装获取当前页面的路由信息 export function getCurrentPath() {let currentRoutes = getCurrentPages(); // 获取当前打开过的页面 ...
ubuntu服务器lxde桌面,UBUNTU最小化搭建LXDE桌面环境
1.基础系统搭建: sudo apt-get install xorg lxde-common lxsession desktop-file-utils openbox sudo apt-get in ...
5G时代App和小程序是否会逐渐消失？
5G时代伴随着时光的车轮,轰轰烈烈的向我们走来,仿佛就已在眼前.5G时代的到来,对我们的生活,对我们的手机,对我们的手机APP会产生什么影响,APP会有什么样的变化呢? 什么是5G?5G指的是第五代移 ...
微信——APP和小程序互相跳转
随大流吧.微信小程序出了这么久,现在才学习下. app和小程序互相跳转: 1.App主动发起小程序卡片分享到微信,微信点击打开小程序,这时的小程序可以打开App 2.App主动发起打开小程序,这时的小 ...
uni.uploadFile上传手机内部图片
背景介绍在开发uni app项目的时候,有一个需求是,将安卓原生插件返回的图片,上传到服务器中. uni app中提供了一个图片上传的api,官网api: uploadFile, 但是插件返回的图 ...
《微信小程序-证件照换底色》之三：微信小程序接收django的图片并部署到windows服务器上
实现小程序接收django的图片并部署到windows服务器上继上一篇:用pycharm搭建django框架接收微信小程序的图片后续链接: https://blog.csdn.net/qq_449 ...
微信小程序图片/视频直传阿里云服务器OSS
阿里云官方文档: https://help.aliyun.com/document_detail/31925.html?spm=a2c4g.11186623.6.634.AMs4Fj 第一步(需要由后 ...
uni-app uni-file-picker文件上传实现拍摄从相册选择获取图片上传文档服务器（H5上传-微信小程序上传）
前言最近在使用uni-app写H5移动端,有一个从手机拍摄从相册选择获取图片上传到文档服务器功能. 查阅uni-app发现关于上传图片,uni-file-picker文件上传,uni.chooseI ...
uni-app开发微信小程序（获取多张本地相册图片并上传到服务器功能）
思路: 用户触发某一事件弹出一个弹窗(用户可能直接手机拍摄或者直接从手机相册选择照片),用户选择完方式后,调用对应的api并把选择好的照片上传到服务器. 涉及到的API: 1.uni.showActi ...

小程序图片懒加载放在服务器,【小程序】使用uni-app搭建小程序环境---图片懒加载...

小程序图片懒加载放在服务器,【小程序】使用uni-app搭建小程序环境---图片懒加载...相关推荐

最新文章

热门文章