小程序 lazy-load 不生效的问题
最近在开发家里喵喵的小程序(娱乐),本想抽一小部分时间做个懒加载。看了小程序官网 API,给 image 标签加上 lazy-load 就能实现懒加载。但从微信开发者工具看,似乎并没有生效。搜了一下,很多小伙伴似乎都遇到了问题,并没有解决。
但经过我的验证, 懒加载确实是生效了 。
只不过, 小程序会提前加载当前屏幕和下一屏的图片,导致感知不到懒加载的存在。
个人认为,这样的懒加载比传统懒加载的体验更加好。
我的验证过程:
验证过程
wxml部分(用 scroll-view 并且加上 bindload):
- <scroll-view class="container" scroll-y>
- <view wx:for="{{list}}" class="list-item">
- <image class="list-img" lazy-load src="{{item.img}}" bindload='onLazyLoad'></image>
- <view>{{item.desc}}</view>
- </view>
- </scroll-view>
js部分:
- const app = getApp()
- Page({
- data: {
- list: []
- },
- onLazyLoad(info) {
- console.log(info)
- }
- })
最终效果
清空首屏输出日志后,滑动过程中输出的日志:
小程序 lazy-load 不生效的问题的更多相关文章
- 微信小程序的calc不生效处理
大致文字初略的记录描述一下问题:外层是relative相对定位,内部一个view 需要绝对定位bottom的值为128rpx,同时还要兼容适配苹果x的底部,所以值是这样设置的: bottom: cal ...
- uni-app解决小程序圆角样式不生效
在使用uni-app实现小程序的时候,设置左图的右圆角不生效,样式也都没有问题,在模拟器上也可以正常现实,手机上样式出现差别,现有以下解决方法: 设置整个圆角,然后左边使用margin-left:-3 ...
- 微信小程序 bindcontroltap 绑定 没生效
微信 bindcontroltap 绑定 没生效 多次查看官方文档,代码没有问题, 解决: windows下 显示设置中 缩放必须是100%,
- 【重点突破】—— UniApp 微信小程序开发官网学习One
一.初步认识 uni-app官网:https://uniapp.dcloud.io/component/README HBuilderX官方IDE下载地址: http://www.dcloud.io/ ...
- 微信小程序学习笔记五 常见组件
1. 常见组件 重点讲解小程序中常用的布局组件 1.1 view 代替 原来的div标签 <!-- pages/index/index.wxml --> <view hover-cl ...
- Lazy freeing of keys 对数据的额异步 同步操作 Redis 4.0 微信小程序
https://github.com/antirez/redis/blob/4.0-rc1/00-RELEASENOTES 数据缓存 · 小程序 https://developers.weixin.q ...
- mpvue 小程序加载不了图片 Error: Failed to load local image resource /images/xx.png the server responded with a status of 404 (HTTP/1.1 404 Not Found)
mpvue开发小程序时候,要添加静态本地图片 <img src="../../images/bg.png" alt=""> 会报错: VM14878 ...
- Taro-UI 2.0样式在H5上生效,微信小程序不生效?
答案: https://taro-ui.aotu.io/#/docs/questions taro-ui 自定义样式覆盖小程序组件样式使用到了 globalClass 这个微信小程序特性,由于微信小程 ...
- 微信小程序警告设置 enable-flex 属性以使 flexbox 布局生效的解决办法
微信小程序警告设置 enable-flex 属性以使 flexbox 布局生效的解决办法 具体情况: scroll-view 滚动,设置 display:flex 不生效并警告设置 enable-fl ...
随机推荐
- Webview 浏览器开源项目总结
在Android开发中,我们不免会遇到使用WebView实现网页展示的需求,以下是本人之前star的开源项目,供大家参考: 一.CrosswalkWebview 项目地址:https://github ...
- CentOS搭建FTP服务
前言: 环境:centos7.5 64 位 正文: 使用 yum 安装 vsftpd yum install vsftpd -y 安装完成后,启动 FTP 服务: service vsftpd sta ...
- Eclipse 修改自动补全触发器只能输入四个字符为多个字符
如果eclipse中的[auto activation triggers for java]自动补全触发器这个位置的文本框有时候只能输入4个字符, 可以通过修改配置文件的方法实现,具体操作步骤如下: ...
- 【Spark调优】小表join大表数据倾斜解决方案
[使用场景] 对RDD使用join类操作,或者是在Spark SQL中使用join语句时,而且join操作中的一个RDD或表的数据量比较小(例如几百MB或者1~2GB),比较适用此方案. [解决方案] ...
- VS解决-无法打开文件“opencv_ts300d.lib”问题
之前使用过opencv,但不想要时没有正确去卸载,终造成历史问题,每次新建工程编译时都会弹出错误,然后停止运行,解决方法较笨笨 成功打印
- [ncw7] 小睿睿的方案
考虑一对情侣(x,y)x<y的贡献,设in[x],out[x]为数的dfs序. 强制从x走向y方向 当in[x]<in[y]且out[y]<=out[x] 矩形{1,in[x],in ...
- Spring 事务传播实践分析
事务管理是应用系统开发中必不可少的一部分.事物将若干的数据库操作作为一个整体控制,一起成功或一起失败.事物有以下特性 原子性:指事务是一个不可分割的工作单位,事务中的操作要么都发生,要么都不发生. ...
- poj1001
#include <iostream> #include<iomanip> #include<cstring> using namespace std; int s ...
- 权限控制和OAuth
目录 1 权限控制是什么 1.1 ACL 1.2 RBAC 1.2.1 名词术语 1.2.2 RBAC定义 1.2.3 RBAC分类 1.2.3.1 RBAC0 1.2.3.2 RBAC1 1.2.3 ...
- LINUX LVM和快照卷配置和管理
具体参考这个文章把: http://www.cnblogs.com/zhaojiedi1992/p/zhaojiedi_linux_042_lvm.html 1.LVM是什么 逻辑卷管理LVM是一个多 ...