最近在开发家里喵喵的小程序(娱乐),本想抽一小部分时间做个懒加载。看了小程序官网 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. idea 过段时间java程序包不存在问题 ?

    有时候我们在导入程序之后,系统会给出错误提示:Java:程序包xxxx不存在,现在我这里有一招,就是使用IDEA自动导入Java程序包,这也是IDEA的一大优点. 但是在看到这个问题的文章的时候,并不 ...

  2. MyBatis 延迟加载的三种加载方式深入,你get了吗?

    延迟加载 延迟加载对主对象都是直接加载,只有对关联对象是延迟加载. 延迟加载可以减轻数据库的压力, 延迟加载不可是一条SQL查询多表信息,这样构不成延迟加载,会形成直接加载. 延迟加载分为三种类型: ...

  3. jQuery之animate()用法

    最近在学习jQuery,看到一个很有意思的函数animate(),但是在网上却没有查到相关的详细资料,于是打算参考jQuery API,自己总结一下. 概述 animate() 方法执行 CSS 属性 ...

  4. vue搭建多页面开发环境

    自从习惯开发了单页面应用,对多页面的页面间的相互跳转间没有过渡效果.难维护极度反感.但是最近公司技术老大说,当一个应用越来越大的时候单页面模式应付不来,但是没讲怎么应付不来,所以还得自己去复习一遍这两 ...

  5. CSS box-sizing属性

    全文摘抄自 https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-sizing 专门抄一遍是因为,我想当然的以为标准盒子模型设置的宽高是包括padd ...

  6. vue属性监听

    1.watch:用来监听每一个属性的变化 2.watch这个对象里面都是函数,函数的名称是data中的属性名称,watch中的函数不需要调用 3.当属性发生改变那么就会触发watch函数,每个函数都会 ...

  7. Centos系统通过tar.gz包安装Mysql5.7

    1.安装mysql之前需要确保系统中有libaio依赖,使用如下命令: yum search libaio yum install libaio 2.进入centos终端操作界面,使用wget命令下载 ...

  8. NuGet包和功能

    Microsoft.AspNetCore.Razor.Tools:提供TagHelper的智能感知提示和代码加粗高亮显示. Microsoft.AspNetCore.Session:管理会话状态的中间 ...

  9. java正则表达式的忽略大小写

    (?i)abc 表示abc都忽略大小写  a(?i)bc 表示bc忽略大小写  a((?i)b)c 表示只有b忽略大小写

  10. vue.js响应式原理解析与实现—实现v-model与{{}}指令

    上一节我们已经分析了vue.js是通过Object.defineProperty以及发布订阅模式来进行数据劫持和监听,并且实现了一个简单的demo.今天,我们就基于上一节的代码,来实现一个MVVM类, ...