iframe懒加载_懒加载是如何实现的？

作为网页内容的一部分，图像和视频通常要消耗很多资源加载。要提高网页应用的性能，如何避免资源浪费在加载图像和视频上就很重要了。但是，很多时候我们都不愿意减少网页上的媒体资源，所以我们经常无从下手。幸运的是，我们有懒加载这个绝招，它可以帮助我们减少加载时间和降低负载，而不在内容上偷工减料。

什么是懒加载？

懒加载是一种在页面加载时延迟加载一些非关键资源的技术，换句话说就是按需加载。对于图片来说，非关键通常意味着离屏。如果你有使用过Lighthouse并且做过一些性能调优，你可能已经见过一些离屏图片的应用。(offscreen-images)

我们之前看到的懒加载一般是这样的形式：

浏览一个网页，准备往下拖动滚动条

拖动一个占位图片到视窗

占位图片被瞬间替换成最终的图片

我们可以在Medium中看到懒加载是如何使用的，网页首先用一张轻量级的图片占位，当占位图片被拖动到视窗，瞬间加载目标图片，然后替换占位图片。

如果你不是很熟悉懒加载技术，你或许会疑问它有什么用，能为我们带来什么好处，下面我们将会探讨这个问题。

为什么要懒加载而不直接加载？

浪费流量。在不计流量收费的网络，这可能不重要；在按流量收费的网络中，毫无疑问，一次性加载大量图片就是在浪费用户的钱。

消耗额外的电量和其他的系统资源，并且延长了浏览器解析的时间。因为媒体资源在被下载完成后，浏览器必须对它进行解码，然后渲染在视窗上，这些操作都需要一定的时间。

懒加载图片和视频，可以减少页面加载的时间、页面的大小和降低系统资源的占用，这些对于性能都有显著地提升。在这里，我们将会提到一些懒加载技术和使用方法，还有一些常用的懒加载库。

懒加载图片

图片懒加载在技术上实现很简单，不过对于细节要求比较严格。目前有很多实现懒加载的方法，先从懒加载内联图片说起吧。

内联图片

最常见的懒加载方式就是利用标签。懒加载图片时，我们利用JavaScript检查标签是否在视窗中。如果在，的src(有时候是srcset)就会设置为目标图片的url。

利用intersection observer

如果你之前用过懒加载，你很可能是通过监听一些事件比如scroll或者resize来检测元素出现在视窗，这种方法很成熟，能够兼容大部分的浏览器。但是，现代浏览器提供了一个更好的方法给我们(the intersection observer API)

注意：Intersection observer目前只能在Chrome63+和firefox58+使用

比起事件监听，Intersection observer用起来比较简单，可阅读性也大大提高。开发者只需要注册一个observer去监控元素而不是写一大堆乱七八糟的视窗检测代码。注册observer之后我们只需要做的就是当元素可见时改变它的行为。举个例子吧：

需要注意三个相关的属性

class：用于在JavaScript中关联元素

src属性：指向了一张占位图片，图片在页面的第一次加载会显现

data-src和data-srcset属性：这是占位属性，里面放的是目标图片的url

ok，看一下怎么在JavaScript中使用Intersection observer吧：

document.addEventListener("DOMContentLoaded", function() {

var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));

if ("IntersectionObserver" in window) {

let lazyImageObserver = ne