性能更优越的小程序图片懒加载方式

AJie 发布于2019-08-22 18:45 / 1799人阅读

摘要：相交比例相交区域占参照区域的比例。阈值相交比例如果达到阈值，则会触发监听器的回调函数。

意义

懒加载或者可以说是延迟加载，针对非首屏或者用户"看不到"的地方延迟加载，有利于页面首屏加载速度快、节约了流量,用户体验好

实现方式

传统H5的懒加载方式都是通过监听页面的scroll事件来实现的，结合viewport的高度来判断。
小程序也类似，通过监听页面onPageScroll事件获取当前滚动的数据，结合getSystemInfo获取设备信息来判断。由于scroll事件密集发生，计算量很大，经常会造成FPS降低、页面卡顿等问题。
这里说的是通过另外一种方式来实现

createIntersectionObserver

小程序基础库 1.9.3 开始支持，了解下

节点布局交叉状态API可用于监听两个或多个组件节点在布局位置上的相交状态。这一组API常常可以用于推断某些节点是否可以被用户看见、有多大比例可以被用户看见。

API涉及到的概念总共有5个

参照节点：监听的参照节点，取它的布局区域作为参照区域。如果有多个参照节点，则会取它们布局区域的交集作为参照区域。页面显示区域也可作为参照区域之一。

目标节点：监听的目标，默认只能是一个节点（使用 selectAll 选项时，可以同时监听多个节点）。

相交区域：目标节点的布局区域与参照区域的相交区域。

相交比例：相交区域占参照区域的比例。

阈值：相交比例如果达到阈值，则会触发监听器的回调函数。阈值可以有多个。

通过以上API和概念的了解，可以获取到图片是否可以被用户看见或者即将被看见，通过回调将图片加载显示出来，然后监听下一组即将被显示的图片，这样就可以达到懒加载图片的方式，以下是代码展示

//index.js
//获取应用实例
const app = getApp()

let lazyload;

Page({
    data: {
        classNote: "item-",                    //循环节点前缀
        count: 0,                              //总共加载到多少张
        img: []                                //图片列表
    },
    onReady: function () {
        //可以先初始化首屏需要展示的图片
        that.setData({
            count: 5
        })
        //开始监听节点，注意需要在onReady才能监听，此时节点才渲染
        lazyload.observe();
    },
    viewPort: function () {
        const that = this;
        var intersectionObserver = wx.createIntersectionObserver();
        //这里bottom：100，是指显示区域以下 100px 时，就会触发回调函数。
        intersectionObserver.relativeToViewport({bottom: 100}).observe(this.data.classNote + this.data.count, (res) => {
            if(res.boundingClientRect.top > 0){
                intersectionObserver.disconnect()
                that.setData({
                    count: that.data.count + 5
                })
                that.viewPort();
            }
        })
    }

})

//page.wxml

这里有2点需要注意的

监听的节点需要先渲染，也就是说监听这个动作需要在onReady的时候

上述示例监听是依赖循环节点的class，最少需要先渲染一个节点才能监听

每次监听完一个循环节点后，结束监听，然后继续监听下一个节点

结果

无论怎么快速滚动，FPS都能保持在60

总结

H5其实也有一个类似的API，小程序的使用方式跟H5也是很类似，有很多东西都可以参考。针对上述监听的方式，我这边简单封装了一个库来调用，欢迎star。

GPU云服务器云服务器 js图片懒加载 js实现数据的懒加载图片懒加载懒加载异常

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96160.html

实例感受-es6的常用语法和优越性

摘要：在重写完了的时候，就个人总结了一下常用的一些常用的语法和比优越的方面。参数字符串是否在原字符串的尾部返回布尔值。第一个大于的成员的索引方法，用于某个数组是否包含给定的值，返回一个布尔值。 1.前言前几天，用es6的语法重写了我的一个代码库，说是重写，其实改动的并不多，工作量不大。在重写完了的时候，就个人总结了一下es6常用的一些常用的语法和比es5优越的方面。下面提到的语法可能也就是...

fsmStudy 2019-08-21 17:36 评论0 收藏0
前端工程师面试必备（持续更新中）

摘要：最近的一次更新的变量有效，并且会作用于全部的引用的处理方式和相同，变量值输出时根据之前最近的一次定义计算，每次引用最近的定义有效嵌套三种预编译器的选择器嵌套在使用上来说没有任何区别，甚至连引用父级选择器的标记也相同。面试汇总一：2018大厂高级前端面试题汇总高级面试：【半月刊】前端高频面试题及答案汇总 css内容响应式布局当前主流的三种预编译器比较 CSS预处理器用一种专门的...

jubincn 2019-05-22 14:42 评论0 收藏0
设计无限滚动下拉加载，实践高性能页面真谛

摘要：论坛上有过这么一篇热门文章，它从角度分析了无限滚动加载的设计实践。无限滚动加载背后的技术挑战其实比想象中要多不少。整体思路和方案设计我们要实现的页面样例如图，它能够做到无限下拉加载内容。 UX Planet论坛上有过这么一篇热门文章: Infinite Scrolling Best Practices，它从UX角度分析了无限滚动加载的设计实践。无限滚动加载在互联网上到处都有应用：豆瓣...

Hanks10100 2019-08-20 14:39 评论0 收藏0
设计无限滚动下拉加载，实践高性能页面真谛

摘要：论坛上有过这么一篇热门文章，它从角度分析了无限滚动加载的设计实践。无限滚动加载背后的技术挑战其实比想象中要多不少。整体思路和方案设计我们要实现的页面样例如图，它能够做到无限下拉加载内容。 UX Planet论坛上有过这么一篇热门文章: Infinite Scrolling Best Practices，它从UX角度分析了无限滚动加载的设计实践。无限滚动加载在互联网上到处都有应用：豆瓣...

novo 2019-08-01 16:25 评论0 收藏0