lazy load와 preload

LazyLoad

LazyLoad는 웹페이지를 불러올 때, 바로 필요하지 않은(보여지지않는) 이미지들의 로딩 시점을 뒤로 미루는 것이다. 사용자가 스크롤 등을 통해 이미지가 보여지는 시점이 되면 그 때 로딩을 한다.

LazyLoad를 사용해야하는 이유는 당장 불필요한 이미지들까지 웹페이지를 불러올 때, 한번에 가지고 오면 로딩 시간과 성능 면에서 떨어지기 때문이다. 또 이미지를 모두 받아오면 데이터를 모두 서버에 저장해야하기때문에 비용적인 측면에서도 문제가 된다.

react-lazy-load 라이브러리

나는 npm에서 react-lazy-load 라이브러리를 받아서 실습을 해보았다.

import React from "react";
import LazyLoad from "react-lazy-load";

export default function MyComponent() {
  return (
    <div>
      <div className="filler" />
      <LazyLoad height={600} offsetVertical={300}>
        <img
          src="https://cdn.pixabay.com/photo/2017/09/25/13/12/cocker-spaniel-2785074_1280.jpg"
          width={500}
          height={500}
        />
      </LazyLoad>
      <div className="filler" />
      <LazyLoad height={600} offsetVertical={300}>
        <img
          src="https://cdn.pixabay.com/photo/2019/08/19/07/45/dog-4415649_1280.jpg"
          width={500}
          height={500}
        />
      </LazyLoad>
      <div className="filler" />
      <LazyLoad height={600} offsetVertical={300}>
        <img
          src="https://cdn.pixabay.com/photo/2016/10/31/14/55/rottweiler-1785760_1280.jpg"
          width={500}
          height={500}
        />
      </LazyLoad>
      <div className="filler" />
      <LazyLoad height={600} offsetVertical={300}>
        <img
          src="https://cdn.pixabay.com/photo/2016/01/05/17/51/maltese-1123016_1280.jpg"
          width={500}
          height={500}
        />
      </LazyLoad>
      <div className="filler" />
      <LazyLoad height={600} offsetVertical={300}>
        <img
          src="https://cdn.pixabay.com/photo/2016/12/13/05/15/puppy-1903313_1280.jpg"
          width={500}
          height={500}
        />
      </LazyLoad>
      <div className="filler" />
      <LazyLoad height={600} offsetVertical={300}>
        <img
          src="https://cdn.pixabay.com/photo/2014/12/10/05/50/english-bulldog-562723__480.jpg"
          width={500}
          height={500}
        />
      </LazyLoad>
      <div className="filler" />
      <LazyLoad height={600} offsetVertical={300}>
        <img
          src="https://cdn.pixabay.com/photo/2016/11/21/00/47/view-1844110__480.jpg"
          width={500}
          height={500}
        />
      </LazyLoad>
      <div className="filler" />
      <LazyLoad height={600} offsetVertical={300}>
        <img
          src="https://cdn.pixabay.com/photo/2018/05/17/06/22/dog-3407906__480.jpg"
          width={500}
          height={500}
        />
      </LazyLoad>
      <div className="filler" />
      <LazyLoad height={600} offsetVertical={300}>
        <img
          src="https://cdn.pixabay.com/photo/2016/11/22/20/10/dog-1850465__480.jpg"
          width={500}
          height={500}
        />
      </LazyLoad>
      <div className="filler" />
      <LazyLoad height={600} offsetVertical={300}>
        <img
          src="https://cdn.pixabay.com/photo/2019/11/07/08/40/dog-4608266__480.jpg"
          width={500}
          height={500}
        />
      </LazyLoad>
    </div>
  );
}

• 10개의 이미지를 하드코딩해서 넣어주었고 이 코드를 실행하면 드래그를 통해 이미지를 볼 때마다 네트워크에서 이미지를 불러오는 것을 확인 할 수 있었다.

---

Preload

Preload는 브라우저에게 현재 페이지에서 필요한 리소스를 빠르게 가져오게 한다. 이미지를 미리 로드하는 경우에 편리하게 사용할 수 있다.

preload의 문법은 아래와 같다.

<link rel="preload" as="..."\>

간단한 코드를 작성해 보았다.

let images = [];

function preload() {
  for (let i = 0; i < preload.arguments.lenght; i++) {
    images[i] = new Image();
    images[i].src = preload.arguments.src;
  }
}

preload("./images1.jpg", "./images2.jpg", "./images3.jpg", "./images4.jpg");