小程序 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 ...
随机推荐
- Crontab和sudo中无法使用TensorFlow ImportError libcublas.so.9.0
最近因为特殊的原因重新安装了python,但是引发了一个很严重的问题--TensorFlow不好使了. 比如我下面这个执行文件test.py: import tensorflow as tf prin ...
- Python编程练习:平方值格式化
问题描述:获得用户输入的一个整数N,计算N的平方值:结果采用宽度20字符方式居中输出,空余字符采用减号(-)填充.如果结果超过20个字符,则以结果宽度为准. 示例: 源码: a = int(input ...
- IDEA环境下GIT操作浅析之一Idea下仓库初始化与文件提交涉及到的基本命令
目标总括 idea 下通过命令操作文件提交,删除,与更新并推送到github 开源库基本操作idea 下通过命令实现分支的创建与合并操作 idea 下通过图形化方式实现idea 项目版本控制基本操作 ...
- 6.listview显示不用条目
文件夹页面 布局只有一个listview,可以继承listactivity,这样少写一个布局文件 tool: * @param index 箱子的索引值 * @return * 对应的uri 或nul ...
- 某神秘公司 RESTful、共用接口、前后端分离、接口约定的实践
阅读本文大概需要 4.6 分钟. 本文来自 https://juejin.im/post/59eafab36fb9a045076eccc3 前言 随着互联网高速发展,公司对项目开发周期不断缩短,我们面 ...
- 吴恩达机器学习笔记4-代价函数III(cost function)
这是代价函数的样子,等高线图,则可以看出在三维空间中存在一个使得
- ActiveMQ 的安装与使用
消息中间件简介 消息中间件(MOM:Message Orient middleware) 消息中间件有很多的用途和优点: 1. 将数据从一个应用程序传送到另一个应用程序,或者从软件的一个模块传送到另外 ...
- HystrixCommand实战
1. HystrixCommand实战 1.1. 需求 由于前端公共调用入口接口代码,封装在单独的jar包,它不属于springCloud管理,所以不适合用注解的方式@HystrixCommand进行 ...
- 工作随笔—integer对象比较
问题:对于integer对象,当比较2==2的时候,返回的值是true还是false?当比较2000==2000的时候,返回的值是true还是false? 回答:当比较2==2的时候,返回的值是tru ...
- RocketMQ入门案例
学习RocketMQ,先写一个Demo演示一下看看效果. 一.服务端部署 因为只是简单的为了演示效果,服务端仅部署单Master模式 —— 一个Name Server节点,一个Broker节点.主要有 ...