写点什么

图片懒加载

作者:源字节1号
  • 2022-11-05
    浙江
  • 本文字数:581 字

    阅读完需:约 2 分钟

图片懒加载

有时候一个网页会包含很多的图片,例如淘宝京东这些购物网站,商品图片多只之又多,页面图片多,加载的图片就多。服务器压力就会很大。不仅影响渲染速度还会浪费带宽。比如一个 1M 大小的图片,并发情况下,达到 1000 并发,即同时有 1000 个人访问,就会产生 1 个 G 的带宽。

为了解决以上问题,提高用户体验,就出现了懒加载方式来减轻服务器的压力,优先加载可视区域的内容,其他部分等进入了可视区域再加载,从而提高性能。

vue 项目中的打包,是把 html、css、js 进行打包,还有图片压缩。但是打包时把 css 和 js 都分成了几部分,这样就不至于一个 css 和就是文件非常大。也是优化性能的一种方式。

效果动图如下:



1.懒加载原理

一张图片就是一个<img>标签,浏览器是否发起请求图片是根据<img>的 src 属性,所以实现懒加载的关键就是,在图片没有进入可视区域时,先不给<img>的 src 赋值,这样浏览器就不会发送请求了,等到图片进入可视区域再给 src 赋值。

2.懒加载思路及实现

实现懒加载有四个步骤,如下:

1.加载 loading 图片

2.判断哪些图片要加载【重点】

3.隐形加载图片

4.替换真图片



如上图所示,让在浏览器可视区域的图片显示,可视区域外的不显示,所以当图片距离顶部的距离 top-height 等于可视区域 h 和滚动区域高度 s 之和时说明图片马上就要进入可视区了,就是说当 top-height<=s+h 时,图片在可视区。


如若转载,请注明出处:开源字节   https://sourcebyte.cn/article/264.html

用户头像

源字节1号

关注

一个着迷于技术又喜欢不断折腾的技术活跃者 2022-03-09 加入

一个着迷于技术又喜欢不断折腾的技术活跃者。喜欢并热爱编程,执着于努力之后所带来的美好生活!

评论

发布
暂无评论
图片懒加载_软件开发_源字节1号_InfoQ写作社区