懒加载和预加载的实现

懒加载和预加载的实现

提到前端性能优化中图片资源的优化,懒加载和预加载就不能不说,下面我用最简洁明了的语言说明懒加载和预加载的核心要点以及实现

懒加载

什么是懒加载

懒加载也就是延迟加载; 当访问一个页面时,先将img标签中的src链接设为同一张图片(这样就只需请求一次,俗称占位图), 将其真正的图片地址存储在img标签的自定义属性中(比如data-src); 当js监听到该图片元素进入可视窗口时,即将自定义属性中的地址存储到src属性中,达到懒加载的效果; 这样做能防止页面一次性向服务器响应大量请求导致服务器响应慢页面卡顿或崩溃等问题

为什么要使用懒加载

懒加载对于图片较多页面很长的业务场景很适用,可以减少无效资源的加载

懒加载的实现步骤

  1. 首先,不要将图片地址放到src属性中,而是放到其它属性(data-src)中

  2. 页面加载完成后,根据scrollTop判断图片是否在用户的视野内, 如果在,则将data-original属性中的值取出存放到src属性中

  3. 在滚动事件中重复判断图片是否进入视野; 如果进入,则将data-original属性中的值取出存放到src属性中

代码实现

既然懒加载的原理是基于判断元素是否出现在窗口可视范围内, 首先我们写一个函数判断元素是否出现在可视范围内:


                    
                    

你可能感兴趣的:(javascript)