图片延迟加载方案_程序人生

admin

2023-08-02 15:56:14

0次

图片延迟加载的原理是什么？

图片延迟加载的原理就是先不设置img的src属性，等合适的时机（比如滚动、滑动等）再把图片真实url放到img的src属性上。
过多的图片会严重影响网页的加载速度，移动网络下的流量消耗巨大，延迟加载几乎是标配。

这个比较简单，设置好固定宽高，直接使用最简单的延迟加载即可
淘宝mobile首页的延迟加载有个点做得特别好，滚动结束后只加载当前视窗可见的图片，不会加载滚动超过视窗的图片，也不会加载还没滚动到的视窗图片。

目前大概有两种方案，各有优劣，具体看情况使用：
第一种方案使用padding-top或者padding-bottom来实现固定宽高比。优点是纯css方案，缺点是html冗余，对输出到第三方不友好

第二种方案在页面初始化阶段利用ratio设置实际宽高值，优点是html干净，对输出到第三方友好，缺点是依赖js，理论上会至少抖动一次

除了上面说的延迟加载，我们可以更进一步的引入srcset，通过设置srcset来保证加载最匹配的图片，这样对于一倍屏，二倍屏，三倍屏来说，可以做到不浪费流量且效果最好。

依赖于jquery


// 初始化
$(\"img.lazy\").lazyload();

原生js，不依赖于jquery/zepto
自动监测可能发生变化的lazyload节点，不需要额外初始化
支持响应式图片srcset
性能高，改善SEO

// 引入js文件


// 非响应式 例子

// 响应式 例子，自动计算合适的图片

// iframe 例子

依赖jquery/zepto











$(\".lazy\").lazyload();

研究了微信延迟加载的代码，还解决了一个问题，那就是常见于移动端的自适应宽度的延迟加载，即根据情况具体计算宽高。

// 源码


// 解析后的代码


/* 其中
data-s：表示可选的图片尺寸大小
data-type：表示图片类型
data-src：表示图片链接
data-ratio：表示长宽比
*/

由于源码是压缩模式的，做简单的猜测如下：

接入第三方平台的网页怎么处理？
由于好奇心日报的文章会输出到第三方平台，比如今日头条/一点资讯等平台，这些平台对html都有一定的规范。这时候就需要后台在输出之前对html做一些转换。
为了简单起见，类似
的方案不太适合让后台转换，所以微信这种动态计算方法可以借鉴。
怎么处理响应式图片？
响应式图片能够根据当前屏幕分辨率加载最匹配的图片，能够因地制宜，详见图片响应式解决方案
方案有了，回头追加一篇具体实践踩坑的博文