前言
在前面一文使用交叉点观察器延迟加载图像以提高性能中,已经知晓了使用该方式可以提高页面的访问速度,那在此基础上,我们还可以做得更好?...本文将为你揭晓,在自己的实际开发中,可以尝试将此skill运用到项目中,如果文中有误导的地方,欢迎路过的老师多提意见和指正
目录:
开始入门(下载安装go,命令行终端下安装SQIP工具)
使用交叉点观察者进行延迟加载...关于这个工具的好处是这个图像的低质量版本只有800字节 - 令人惊叹,在本地服务器中可进行测试,我示例中的图片svg占900字节,具体以你自己测试的为准
使用交叉点观察者进行延迟加载
现在我们有了两个版本的图像...如果你以前从未听说过交叉观测器,它将内置到大多数现代浏览器中,并让你知道观察到的元素何时进入或退出浏览器的视口。...我们希望确保如果图像在Y轴上达到50像素以内,我们将开始下载
现在我们已经创建了一个交叉点观察器,并且正在观察页面上的图像,我们可以利用交叉点事件,当元素进入视图时将会触发
function onIntersection