深入理解图片和框架
|
到本文标题你会问「懒加载是什么东西？」CSS-Tricks 网站中有非常多的探讨懒加载的文章，其中有一篇非常详尽的《用 JavaScript 花式实现懒加载的指南文档》。简言之，我们要讨论的是一种延迟网络资源加载的机制，在该机制下，网页内容按需加载，或者说得更直白些，当网页内容进入用户视野时再触发加载。 这样做有什么好处？压缩初始页面的体积以提升加载速度；免于为用户根本不会看到的内容浪费网络请求。 如果你之前读过关于懒加载的其他文章，你就会明白，我们必须借助各种不同的方式才能实现懒加载功能。而当原生 HTML 用 loading 特性支持懒加载功能后，那可就柳暗花明又一村了。目前仅有 Chrome 支持 loading 特性，但有望全面开花。Chrome 近期正在开发和测试对原生懒加载特性的支持功能，预计在 2019 年 9 月初发布的 Chrome 77 版本中面世。 截至目前，我们这群开发者仍需要用 JavaScript（不论是借助第三方库还是自己从零手写）实现懒加载功能。大多数懒加载库的原理都是： 服务端返回的 HTML 响应中包含一个初始的、不带 src 特性的 img 元素，这样浏览器就不会加载任何数据。而图片的链接地址放在 img 元素的其他特性上，例如 data-src。 前文所说，Chromium 开发团队和 Google Chrome 开发团队从 Chrome 75 开始，装载 loading 特性支持的原生懒加载功能。关于该特性及其值，我们稍后再讨论，还是先在浏览器里启用这个功能来一探究竟吧。 启用原生懒加载功能 从 Chrome 75 开始，我们可以切换两个开关来手动启用懒加载功能。预计从 Chrome 77（计划于 2019 年 9 月发布）开始，该功能就会是默认开启的了。
（编辑：淮安站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
