简单
技术面试0 次浏览微博的页面上有很多图片,为了优化性能,需要对图片进行懒加载。请简述实现图片懒加载的原理和基本步骤。
微博前端工程师
前端性能优化图片懒加载
答题要点
可采用 STAR 法则答题。S(情景)是微博页面图片多,需要优化性能。T(任务)是实现图片懒加载。A(行动)和 R(结果)则围绕具体实现展开。关键要点:1. 原理是当图片进入浏览器可视区域时才进行加载,减少初始加载的资源量。2. 为图片设置一个临时的占位符,真实的图片地址存储在自定义属性中。3. 监听页面滚动或其他触发事件,判断图片是否进入可视区域。4. 当图片进入可视区域时,将自定义属性中的真实地址赋值给图片的 src 属性。示例话术:在微博页面中,为了优化性能,我们采用图片懒加载。首先给图片设置占位符和自定义属性存储真实地址,然后监听滚动事件,当图片进入可视区域时,将真实地址赋给 src 属性,实现图片加载。