待用户往下滚动的时候,再按需加载相关。懒加载技术主要通过JavaScript脚本去实现。其主要实现思路是,在每个HTML中的每个IMG标签,定义一个data-src属性存放图片地址,并将原来应该放图片地址的SRC属性指
懒加载技术。绝大多数的电商APP,都用长页面去展示商品信息,通常需要滚动很久,展示很多信息,才会到达APP底部,或者一直没有到底部。电商APP采用长页面这一做法,目的是为了让用户更轻易地获得海量信息,只需要滚动滚轮,不需要点击页码分页浏览。但这一做法,会增加APP的臃肿度,因为一个页面内容太多,需要加载的图片数量必然会增多。一打开页面就发送上百的图片请求,服务器的压力十分大。
懒加载技术就非常适用于页面很长的业务场景。懒加载的思路非常简单,打开页面的时候,优先加载APP第一屏(用户首先看到的屏幕内容)中的内容。待用户往下滚动的时候,再按需加载相关。懒加载技术主要通过JavaScript脚本去实现。其主要实现思路是,在每个HTML中的每个IMG标签,定义一个data-src属性存放图片地址,并将原来应该放图片地址的SRC属性指向loading的图片。在页面初步加载的时候,先通过JavaScript获得到整个页面中所有包含data-src属性的图片元素,将其加入到一个缓存数组,然后监听滚动事件,当滚动事件被触发的时候,遍历缓存数组的每一个元素,并判断该元素是否出现在视窗中,如果出现在视窗中,即可将SRC属性的值替换成data-src的值,从而达到加载图片的目的。
懒加载技术可以为APP节约大量不必要的图片加载数量,使得首次加载的大大减少,让APP运行得更流畅。
