前言
在前面一文使用交叉点观察器延迟加载图像以提高性能中,已经知晓了使用该方式可以提高页面的访问速度,那在此基础上,我们还可以做得更好?...本文将为你揭晓,在自己的实际开发中,可以尝试将此skill运用到项目中,如果文中有误导的地方,欢迎路过的老师多提意见和指正
目录:
开始入门(下载安装go,命令行终端下安装SQIP工具)
使用交叉点观察者进行延迟加载...使用延迟加载技术将意味着用户只加载他们在视口中看到的内容,而与低质量图像相结合则意味着双重网页性能会带来麻烦
在这篇文章中,我将通过我所经历的步骤和您如何开始使用这种技术来谈谈您自己
开始入门
在我们继续之前...关于这个工具的好处是这个图像的低质量版本只有800字节 - 令人惊叹,在本地服务器中可进行测试,我示例中的图片svg占900字节,具体以你自己测试的为准
使用交叉点观察者进行延迟加载
现在我们有了两个版本的图像...加载图像后,我们不需要再观察它,并且使用unobserve()将从交叉观察者的条目列表中将其删除。而已!