这种方式判断元素是否出现在视窗中更为简单直观 ， 应在实际开发中尽量使用 ， 但其问题是并非所有浏览器都能兼容 。
（1）做好尽量完备浏览器兼容性检查 ， 对于兼容Intersection Observer API的浏览器 ， 采用这种方式进行处理 ， 而对于不兼容的浏览器 ， 则切换回传统的实现方式进行处理 。（2）使用相应兼容的polyfill插件 ， 在W3C官方GitHub账号下就有提供 。
实现图片的延迟加载：css类名方式这种实现方式通过CSS的background-image属性来加载图片 ， 与判断〈img〉标签src属性是否有要请求图片的URL不同 ， CSS中图片加载的行为建立在浏览器对文档分析基础之上 。
document.addEventListener(DOMContentLoaded, function() {const imags = [].slice.call(document.querySelector('.lazy'))if(window.IntersectionObserver && window.IntersectionObserverEntry && window.IntersectionObserverEntry.prototype.intersectionRatio) {var lazyImgObserver = new IntersectionObserver((entries, observer) => {entries.forEach((entry)=> {if(entry.isIntersecting) {var lazyImg = entry.target;lazyImg.classList.add('visible');lazyImgObserver.unobserve(lazyImg)}})})imags.forEach((img) => {lazyImgObserver.observe(img)})}})
文章插图
这种方式限制于需要提前写好css样式 。
原生的延迟加载支持除了上述通过开发者手动实现延迟加载逻辑的方式 ， 从Chrome 75版本开始 ， 已经可以通过〈img〉和〈iframe〉标签的loading属性原生支持延迟加载了 ， loading属性包含以下三种取值 。
● lazy：进行延迟加载 。● eager：立即加载 。● auto：浏览器自行决定是否进行延迟加载 。
测试：image标签就是 img
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- <script src=https://www.isolves.com/it/cxkf/bk/2021-09-06/"js/file2.js"> -->