最近在开发家里喵喵的小程序(娱乐),本想抽一小部分时间做个懒加载。看了小程序官网 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 不生效的问题的更多相关文章

  1. 微信小程序的calc不生效处理

    大致文字初略的记录描述一下问题:外层是relative相对定位,内部一个view 需要绝对定位bottom的值为128rpx,同时还要兼容适配苹果x的底部,所以值是这样设置的: bottom: cal ...

  2. uni-app解决小程序圆角样式不生效

    在使用uni-app实现小程序的时候,设置左图的右圆角不生效,样式也都没有问题,在模拟器上也可以正常现实,手机上样式出现差别,现有以下解决方法: 设置整个圆角,然后左边使用margin-left:-3 ...

  3. 微信小程序 bindcontroltap 绑定 没生效

    微信 bindcontroltap 绑定 没生效 多次查看官方文档,代码没有问题, 解决: windows下  显示设置中 缩放必须是100%,

  4. 【重点突破】—— UniApp 微信小程序开发官网学习One

    一.初步认识 uni-app官网:https://uniapp.dcloud.io/component/README HBuilderX官方IDE下载地址: http://www.dcloud.io/ ...

  5. 微信小程序学习笔记五 常见组件

    1. 常见组件 重点讲解小程序中常用的布局组件 1.1 view 代替 原来的div标签 <!-- pages/index/index.wxml --> <view hover-cl ...

  6. Lazy freeing of keys 对数据的额异步 同步操作 Redis 4.0 微信小程序

    https://github.com/antirez/redis/blob/4.0-rc1/00-RELEASENOTES 数据缓存 · 小程序 https://developers.weixin.q ...

  7. 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 ...

  8. Taro-UI 2.0样式在H5上生效,微信小程序不生效?

    答案: https://taro-ui.aotu.io/#/docs/questions taro-ui 自定义样式覆盖小程序组件样式使用到了 globalClass 这个微信小程序特性,由于微信小程 ...

  9. 微信小程序警告设置 enable-flex 属性以使 flexbox 布局生效的解决办法

    微信小程序警告设置 enable-flex 属性以使 flexbox 布局生效的解决办法 具体情况: scroll-view 滚动,设置 display:flex 不生效并警告设置 enable-fl ...

随机推荐

  1. 两张图彻底搞懂MyBatis的Mapper原理!

    作者:肥朝 简单使用 这是一个简单的Mybatis保存对象的例子 1@Test 2public void testSave() throws Exception { 3 //创建sessionFact ...

  2. Apache Commons FileUpload 实现文件上传

    Commons FileUpload简介 Apache Commons是一个专注于可重用Java组件开发的 Apache 项目.Apache Commons项目由三个部分组成: 1.Commons P ...

  3. Tomcat 启动时项目报错 org.springframework.beans.factory.BeanCreationException

    事情是这样的,最近我们公司需要将开发环境和测试环境分开,所以就需要把所有的项目部署一套新的开发环境. 我们都是通过 Jenkins 进行部署的,先说一下两个环境的配置: 测试环境配置(旧):jdk1. ...

  4. 《http权威指南》读书笔记14

    概述 最近对http很感兴趣,于是开始看<http权威指南>.别人都说这本书有点老了,而且内容太多.我个人觉得这本书写的太好了,非常长知识,让你知道关于http的很多概念,不仅告诉你怎么做 ...

  5. [Swift]Xcode标记:MARK、TODO、FIXME

    1. MARK MARK一定要大写.其又叫做代码标注,我们可以使用它来添加一些说明文字.同时可以选择其上方是否需要显示分割线. // MARK: - 说明文字,带分割线 // MARK: 说明文字,不 ...

  6. 彻底填平Static坑(细节决定成败)

    static 学习的过程就是填坑的过程,可不要偷懒想着跳过去,你现在跳过去,就相当于给自己挖了一个坑,你迟早会掉进去的,为了避免不掉坑,所以,努力填坑吧! 一.如果没有static会怎样? 需求: 1 ...

  7. 单元测试mock当前时间

    在实际项目中很多地方用到DateTime.Now,这个时间是时时变化的.如果要进行单元测试对比预期结果时,这个时间无法预测,可以添加如下两个时间类 namespace Common.Helper { ...

  8. Spark streaming消费Kafka的正确姿势

    前言 在游戏项目中,需要对每天千万级的游戏评论信息进行词频统计,在生产者一端,我们将数据按照每天的拉取时间存入了Kafka当中,而在消费者一端,我们利用了spark streaming从kafka中不 ...

  9. vue中复选框全选与反选

    html主要部分: <template v-for="(item, index) in checkboxList"> <input type="chec ...

  10. spring boot -thymeleaf-异常处理

    异常流程 :controller-ControllerAdvice-异常解析器-默认的error页面 1.错误页面error.html: 程序出现异常会自动跳到error.html里,视频效果,该页面 ...