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