实现图片懒加载

当一个页面同时加载几千张图片时,会对服务器造成跟大的压力,并且还会导致渲染速度的降低,为了解决这一问题,我们可以想办法让图片出现在我们的可视区域后再加载

懒加载原理:
图片是否渲染是根据的src属性,所以在图片没有进入可视区域时,先不给src赋值,这样浏览器就不会发送请求了,等到图片进入可视区域再给src赋值。

懒加载思路:

1.加载loading图片
2.判断图片是否开始加载
3.隐形加载图片
4.替换真图片

效果图

 

判断图片是否加载的条件为(所以当图片的offsetTop>srcollTop+clientHeight时图片开始加载)

实现图片懒加载_第1张图片

 代码如下:




  
  
  Document
  


  

 

你可能感兴趣的:(前端面试题总结)