物联网|五种延迟加载图像以提高网站性能的方法( 三 )

您可以通过多种方式延迟加载具有这种有趣模糊效果的图像。
我们最喜欢的技术是 Craig Buckler 。这是此解决方案的所有优点：

性能：只有 463 字节的 CSS 和 1007 字节的缩小JavaScript代码
支持视网膜屏幕
无依赖：不需要 jQuery 或其他库和框架
逐步增强以抵消旧浏览器和失败的 JavaScript

#5 Yall.jsYall 是一个功能丰富的延迟加载脚本，用于图像、视频和 iframe 。更具体地说，它使用 Intersection Observer API ，并在必要时巧妙地使用传统的事件处理程序技术。
在您的文档中包含 Yall 时，您需要按如下方式对其进行初始化：
<script src=https://mparticle.uc.cn/"yall.min.js\"></script> <script> document.addEventListener(\"DOMContentLoaded\" yall); </script>
接下来，要延迟加载一个简单的img元素，您只需在标记中执行以下操作：
<img class=\"lazy\" src=https://mparticle.uc.cn/"placeholder.jpg\" data-src=https://mparticle.uc.cn/"image-to-lazy-load.jpg\" alt=\"Alternative text to describe image.\">
请注意以下事项：

您将类添加到元素
src值是一个占位符图像
要延迟加载的图像的路径在data-src属性内

Yall 的好处包括：

Intersection Observer API 的出色性能
出色的浏览器支持（它可以追溯到 IE11）
不需要其他依赖项

结论你有五种延迟加载图像的方法，您可以开始在您的项目中进行试验和测试。