Разговор о ленивой загрузке IntersectionObserver

внешний интерфейс JavaScript

концепция

Интерфейс IntersectionObserver (часть API Intersection Observer) предоставляет разработчикам средства для асинхронного отслеживания пересечения целевого элемента с его предками или окнами просмотра. Элемент-предок и область просмотра называются корнем.

Это официальная концепция, представленная на MDN, не беспокойтесь об этом, я просто придерживаюсь ее, чтобы выглядеть профессионально...

Сосредоточьтесь здесьСредство прослушивания пересечения целевого элемента и его предков или окон просмотра., по сути, заключается в наблюдении за тем, виден ли элемент в окне просмотра.

是否可见

Как видите, пересечение означает, что текущий элемент находится в окне просмотра и в данный момент виден.

API

var io = new IntersectionObserver(callback, options)

На самом деле это простой конструктор.

Приведенный выше код вернетIntersectionObserverпример,callbackфункция обратного вызова при изменении видимости элемента,optionsнекоторые элементы конфигурации (необязательные).

Мы используем возвращенный экземпляр для выполнения некоторых операций.

io.observe(document.querySelector('img'))  开始观察，接受一个DOM节点对象
io.unobserve(element)   停止观察 接受一个element元素
io.disconnect() 关闭观察器

options

root

Корневой элемент, используемый для наблюдения, по умолчанию это область просмотра браузера, или можно указать конкретный элемент.При указании элемента элемент, используемый для наблюдения, должен быть дочерним элементом указанного элемента

threshold

Он используется для указания перекрестного отношения и принятия решения о том, когда запускать функцию обратного вызова.Это массив.По умолчанию[0].

const options = {
	root: null,
	threshold: [0, 0.5, 1]
}
var io = new IntersectionObserver(callback, options)
io.observe(document.querySelector('img'))

В приведенном выше коде мы указываем перекрестный коэффициент как 0, 0,5, 1, и функция обратного вызова будет запущена, когда элемент наблюдения img0%, 50%, 100%

rootMargin

Используется для расширения или уменьшения размера окна с помощью метода определения css,10px 10px 30px 20pxПредставляет значение верхнего, правого, нижнего и левого

const options = {
	root: document.querySelector('.box'),
	threshold: [0, 0.5, 1],
	rootMargin: '30px 100px 20px'
}

Для облегчения понимания я нарисовал картинку, как показано ниже.

options

Прежде всего, давайте посмотрим на вопрос на картинке ниже: Что такое синяя линия? Он является корневым элементом, который мы определили, мы добавилиrootMarginСвойства, окно увеличено, пунктирная линия — это текущее окно, значит элемент теперь в окне.

Видно, что корневой элемент толькоrootMarginКогда оно пусто, это абсолютное окно.

Говоря о простых вариантах, давайте рассмотримcallback.

callback

Как мы сказали выше, при изменении видимости элемента срабатывает функция обратного вызова.

Функция обратного вызова будет срабатывать дважды, когда элемент входит в область просмотра (когда он становится видимым) и когда элемент покидает область просмотра (когда он становится невидимым).

var io = new IntersectionObserver((entries)=>{
	console.log(entries)
})

io.observe($0)

Приведенный выше код отладьте в консоли Chrome, здесь я использую$0Выбран узел, когда я в последний раз просматривал выбор элемента

Текущий результат выглядит следующим образом

运行结果

Мы видим, что функция обратного вызова имеетentriesпараметр, этоIntersectionObserverEntryМассив объектов, сосредоточимся на объекте IntersectionObserverEntry

IntersectionObserverEntry

IntersectionObserverEntryПредоставляет информацию об наблюдаемом элементе и имеет семь свойств.

boundingClientRect Информация о прямоугольнике целевого элемента.

IntersectionRatio Соотношение между областью пересечения и целевым элементом, crossitionRect/boundingClientRect, меньше или равно 0, когда он не виден.

пересечениеRect Информация о прямоугольнике пересечения целевого элемента и области просмотра (корня) может быть названа областью пересечения.

isIntersecting Является ли целевой элемент видимым в данный момент Логическое значение Visible равно true

rootBounds Информация о прямоугольнике корневого элемента, если корневой элемент не указан, это информация о прямоугольнике текущего окна.

нацелить целевой элемент для наблюдения

время возвращает запись изIntersectionObserverОтметка времени до момента срабатывания кроссовера

Связь между приведенной выше информацией о прямоугольнике следующая:

关系

👇 фокус

intersectionRatioа такжеisIntersectingОн используется для определения того, виден ли элемент, делая ставки...

ленивая загрузка

Что ж, через некоторые из вышеперечисленных понятий мы, наверное, понимаемIntersectionObserverЧто это такое, а потом мы используем его, чтобы написать какой-то код, что написать? Правильно, ленивая загрузка.

Реализовать ленивую загрузку через IntersectionObserver гораздо проще, нужно только задать callback для определения, виден ли текущий элемент, а затем выполнить операцию рендеринга, не заботясь о внутренних вычислениях.

Основной код выглядит следующим образом

const io = new IntersectionObserver(()=>{ // 实例化 默认基于当前视窗
	
})  

let ings = document.querySelectorAll('[data-src]') // 将图片的真实url设置为data-src src属性为占位图 元素可见时候替换src

function callback(entries){  
	entries.forEach((item) => { // 遍历entries数组
		if(item.isIntersecting){ // 当前元素可见
			item.target.src = item.target.dataset.src  // 替换src
			io.unobserve(item.target)  // 停止观察当前元素 避免不可见时候再次调用callback函数
		}	
	})
}

imgs.forEach((item)=>{  // io.observe接受一个DOM元素，添加多个监听 使用forEach
	io.observe(item)
})

Я хотел записать изображение в формате GIF, но не смог загрузить его с помощью Recordlt. У кого есть полезная программа для записи изображений в формате GIF, пожалуйста, порекомендуйте ее, я был бы очень признателен. .

Привет, дарю тебе цветы 🌹

Из-за ограниченного места, пожалуйста, нажмите на полный кодgithub😜

⚠️Внимание

В настоящее время IntersectionObserver является экспериментальной функцией, используйте ее по мере необходимости.

兼容性

Категории