Lazy loading mọi thứ với Intersection Observer

Lazy loading là kỹ thuật được sử dụng để tải những nội dung đang được hiển thị trong khung nhìn của bạn thay vì tải toàn bộ nội dung trên trang web. Nó được áp dụng khi trang web có quá nhiều hình ảnh hoặc trang web có sử dụng iframe,... nhằm mục đích giúp tăng tốc độ tải trang để giúp cho trải nghiệm của bạn trở nên tốt hơn. Bạn có thể tham khảo cách sử dụng Intersection Observer để lazy loading ảnh hay iframe dưới đây.

Trước hết, ta cần đổi thuộc tính src của iframe thành một thứ khác (ví dụ: data-src), để nó không tải bất cứ thứ gì trong quá trình hiển thị ban đầu.

<iframe data-src="https://phannhatchanh.com"></iframe>
<img data-src="../lazy-load.png" />

<iframe data-src="https://phannhatchanh.com"></iframe>
<img data-src="../lazy-load.png" />

Sau đó ta sẽ thay đổi data-src thành src khi người dùng cuộn thanh cuộn (scrollbar) đến viewport thì iframe mới được load.

lazy-iframe-hook.js

import { useEffect } from 'react'
 
let useLazyIframe = () =>
  useEffect(() => {
    let observer = new IntersectionObserver(
      entries => {
        entries
          .filter(e => e.isIntersecting)
          .forEach(({ target: $el }) => {
            $el.setAttribute('src', $el.getAttribute('data-src'))
            observer.unobserve($el)
          })
      },
      {
        rootMargin: '10%',
      }
    )
 
    document
      .querySelectorAll('iframe[data-src]')
      .forEach($el => observer.observe($el))
 
    return () => observer.disconnect()
  }, [])
 
export default useLazyIframe
export { useLazyIframe }

lazy-iframe-hook.js

import { useEffect } from 'react'
 
let useLazyIframe = () =>
  useEffect(() => {
    let observer = new IntersectionObserver(
      entries => {
        entries
          .filter(e => e.isIntersecting)
          .forEach(({ target: $el }) => {
            $el.setAttribute('src', $el.getAttribute('data-src'))
            observer.unobserve($el)
          })
      },
      {
        rootMargin: '10%',
      }
    )
 
    document
      .querySelectorAll('iframe[data-src]')
      .forEach($el => observer.observe($el))
 
    return () => observer.disconnect()
  }, [])
 
export default useLazyIframe
export { useLazyIframe }

Sử dụng trong React

App.js

import React from "react";
import { useLazyIframe } from './lazy-iframe-hook';

function App() {
  useLazyIframe();
  return (
    <div className="App">
      <header className="App-header">
        <img data-src={logo} className="App-logo" alt="logo" />
        <p>
          Load everything lazy with Intersection Observer
        </p>
	...

App.js

import React from "react";
import { useLazyIframe } from './lazy-iframe-hook';

function App() {
  useLazyIframe();
  return (
    <div className="App">
      <header className="App-header">
        <img data-src={logo} className="App-logo" alt="logo" />
        <p>
          Load everything lazy with Intersection Observer
        </p>
	...

Tham khảo

•••