懒加载

什么是懒加载?

懒加载其实就是延迟加载,按需加载,只有在需要时才加载,他是网站的一种优化方案。

我们为什么要使用懒加载?

减少http请求,减少服务器的负担,提高用户体验。一些大型的电商网站,比如淘宝,天猫,京东,一般它们的页面商品图片繁多,而每加载一张图片就会发送一次http请求,如果让浏览器一次性渲染全部图片,这样用户的等待时间就长,用户体验相当不好,也给服务器带来一定的负担,这个时候就可以使用懒加载,先让浏览器加载一部分呈现在视窗的图片,当用户下拉时按需将呈现在视窗的图片加载给用户,这样的用户体验就会好很多。

怎么使用懒加载?

首先给每一张要懒加载的图片添加一个自定义属性,比如data-src,在该属性里面存放真实的图片路径,设置触发事件,当事件触发时,将data-src的路径获取出来,添加到src属性里面。

这只是其中的一种思路,写得有不对不好的地方望指点,一个刚起步的web前端小白的一点简书。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1、懒加载 1.什么是懒加载? 懒加载也就是延迟加载。当访问一个页面的时候,先把img元素或是其他元素的背景图片路...
    xiaolizhenzhen阅读 70,530评论 18 160
  • 1、懒加载1.什么是懒加载?懒加载也就是延迟加载。当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替...
    Gaochengxin阅读 2,849评论 1 2
  • 懒加载和预加载 1. 懒加载 1. 什么是懒加载? 懒加载也就是延迟加载 当访问一个页面的时候,先把img元素或是...
    琦琦出去玩了阅读 4,059评论 0 8
  • 什么是懒加载 对于用户暂时不需要的数据,不在页面打开的时候就去发送请求,设置一个条件,当用户触发条件的时候再去加载...
    刘圣凯阅读 1,716评论 0 0
  • 昨天何老师玩小螃蟹,跟阿嫲说:这个是小螃蟹,那个是他的阿公阿嫲,他的爸爸妈妈去上班了不在家。跟我一样,我的爸爸妈妈...
    云在波心阅读 3,134评论 0 1