最近在开发家里喵喵的小程序(娱乐),本想抽一小部分时间做个懒加载。看了小程序官网 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. 1分钟快速制作漂亮的H5本地记事本

    大家好,以前给大家分享过一个五步骤制作精美的HTML5时钟的文章,点击回顾<五步教你制作漂亮精致的HTML时钟>,还有<一分钟教你如何实现唯美的文字描边>:今天给大家分享一个用 ...

  2. JavaScript中常见的10个BUG及其修复方法

    如今网站几乎100%使用JavaScript.JavaScript看上去是一门十分简单的语言,然而事实并不如此.它有很多容易被弄错的细节,一不注意就导致BUG. 1. 错误的对this进行引用 在闭包 ...

  3. 吴恩达机器学习笔记18-多类别分类:一对多(Multiclass Classification_ One-vs-all)

    对于之前的一个,二元分类问题,我们的数据看起来可能是像这样: 对于一个多类分类问题,我们的数据集或许看起来像这样: 我用3 种不同的符号来代表3 个类别,问题就是给出3 个类型的数据集,我们如何得到一 ...

  4. 吴恩达机器学习笔记7-梯度下降III(Gradient descent intuition) --梯度下降的线性回归

    梯度下降算法和线性回归算法比较如图: 对我们之前的线性回归问题运用梯度下降法,关键在于求出代价函数的导数,即: 我们刚刚使用的算法,有时也称为批量梯度下降.实际上,在机器学习中,通常不太会给算法起名字 ...

  5. Docker学习笔记-Docker for Windows 安装

    前言: 环境:windows10专业版 64位 正文: 官方下载地址:https://hub.docker.com/editions/community/docker-ce-desktop-windo ...

  6. Robot Framework - 一些练习

    01 - 安装Robot Framework TA环境 根据系统请选择对应的版本包来安装,下面是以Win7-64bit系统为例,来说明如何搭建一个可以运行练习三test case的RF TA环境. 1 ...

  7. 毕业不到一年,绩效打了个D!

    周末了,和大家来聊聊程序员工作态度的问题. 说说栈长的事迹吧,这是好多年前的事了,那时候,栈长才毕业不到一年,那次绩效打了个D!事后,我很气愤啊,我那时还在博客上写文章怒骂了部门经理,现在想起来,真是 ...

  8. mysql 开发进阶篇系列 19 MySQL Server(innodb_flush_log_at_trx_commit与sync_binlog)

    一. innodb_flush_log_at_trx_commit 这个参数名称有个log,一看就是与日志有关.是指:用来控制缓冲区(log buffer)中的数据写入到日志文件(log file), ...

  9. Hadoop学习笔记(五):java开发MapReduce

    1. MapReduce的流程图(摘自马士兵老师视频),我们开发的就是其中的这两个(红框)过程.简述一下这个图,input就是我们需要处理的文件(datanode上文件的一个分块):Split就是将这 ...

  10. Windows服务器端口绑定证书

    打开IIS:inetmgr 打开服务:ctrl+shift+Esc 查看证书秘钥: 服务器查看https证书绑定: 1) 查看证书 netsh http show sslcert 2) 将证书与端口绑 ...