이미지와 같은 지연 로드 스크립트

최근 몇 년간 html의 가장 뛰어난 개선 사항 중 하나는 이미지(iframe도 포함)에 추가할 수 있는 loading="lazy" 속성입니다. 뷰포트에 나타날 때까지 이미지를 표시합니다.

    <img src="/images/your-image.png" loading="lazy">

매우 간단하고 매우 유용합니다. 하지만 스크립트에도 이 작업을 수행할 수 있다면 좋지 않을까요? 실제로 필요한 경우에만 구성 요소를 느리게 로드할 수 있도록...

또 다른 기능은 요소에는 onload 및 onerror 속성을 사용하여 이미지가 로드된(또는 로드되지 않은) 후 스크립트를 실행할 수 있는 기능이 있습니다.

    <img 
        src="/images/your-image.png" 
        loading="lazy"
        onload="() => console.log('image loaded')"
    >

이 온로드 "콜백"은 해당 이미지가 로드될 때만 실행되며, 이미지가 느리게 로드된 경우 이미지가 뷰포트에 있을 때만 실행됩니다. 그럼 짜잔! 느리게 로드된 스크립트.

아쉽게도 이대로는 별 소용이 없습니다. 첫째, 페이지에 원치 않는 이미지가 있을 것이고, 둘째, 실행하려는 자바스크립트를 인라인해야 하는데, 이는 지연 로딩의 목적에 어긋납니다. 따라서 이를 개선하기 위해 몇 가지 사항을 변경해 보겠습니다.

이미지 자체는 무엇이든 될 수 있으며, 더 중요한 것은 아무것도 될 수 없습니다. 앞서 언급했듯이 이름에서 알 수 있듯이 이미지가 로드되지 않을 때 실행되는 onerror 콜백이 있습니다.

이것은 존재하지 않는 이미지를 src에 지정해야 한다는 의미는 아닙니다. 그러면 콘솔이 이미지 누락에 대한 빨간색 404 오류로 가득 차게 되며 아무도 이를 원하지 않습니다.

onerror 콜백은 src 이미지가 실제로 이미지가 아닌 경우에도 실행되며, 이를 수행하는 가장 쉬운 방법은 data: 형식을 사용하여 이미지를 "잘못 인코딩"하는 것입니다. 또한 이미지 누락에 대한 경고로 콘솔을 채우지 않는다는 이점도 있습니다.

    <img 
        src="data:," 
        loading="lazy"
        onerror="() => console.log('image not loaded')"
    >

그래도 페이지에 "깨진 이미지" 미리보기 이미지가 표시되지만 그에 대해 알아보겠습니다.

그렇습니다. 하지만 실행하려는 자바스크립트를 인라인해야 하는데 어떻게 해결할 수 있나요?

이제 ES 모듈 지원은 거의 보편적이므로 이벤트가 발생한 후 다음과 같이 매우 강력한 event-import-then-default 자바스크립트 로딩 기술을 사용하여 스크립트를 로드할 수 있습니다.

    <img 
        src="data:," 
        loading="lazy"
        onerror="import('/js/some-component.js').then(_ => _.default(this))"
    >

참고: 이는 onclick, onchange 등의 이벤트에도 적용됩니다
참고: 밑줄은 모듈에 액세스하는 간단한 방법일 뿐이며 .then(Module => Module.default(this))

라고 쓸 수도 있습니다.

그럼 여기서 무슨 일이 일어나고 있는 걸까요!?

먼저 일부 구성 요소가 어떻게 생겼는지 살펴보겠습니다.

// some-component.js

export default element => {
    element.outerHTML = `
        <div class="whatever">
            <p>Hello world!</p>
        </div>
    `;
}

따라서 onerror 콜백에서 이를 기본 내보내기에 대한 인수로 전달했다는 것을 눈치채셨을 것입니다. 제가 이(말장난을 해서 죄송합니다)한 이유는 스크립트에 이것(내가 또 했나?) 문맥에서 this = .

이제 간단히 element.outerHTML을 사용하여 손상된 이미지를 HTML 마크업으로 대체할 수 있으며, 그러면 지연 로드된 스크립트가 생성됩니다! ?

캐싱 및 인수 전달

이 기술을 한 페이지에서 두 번 이상 사용하는 경우 "캐시 무효화" 인덱스 또는 임의의 숫자를 데이터에 전달해야 합니다. 예를 들어 다음과 같습니다.

    <img 
        src="data:,abc123" 
        loading="lazy"
        onerror="import('/js/some-component.js').then(_ => _.default(this))"
    >
    <img 
        src="data:,xyz789" 
        loading="lazy"
        onerror="import('/js/some-other-component.js').then(_ => _.default(this))"
    >

":," 뒤의 문자열은 서로 다르기만 하면 무엇이든 가능합니다.

매개변수를 함수에 전달하는 매우 간단한 방법은 다음과 같이 html에서 data-something 속성을 사용하는 것입니다.

    <img 
        src="data:," 
        loading="lazy"
        data-message="hello world"
        onerror="import('/js/some-component.js').then(_ => _.default(this))"
    >

this를 함수에 전달하므로 다음과 같이 데이터 속성에 액세스할 수 있습니다.

export default element => {
    const { message } = element.dataset
    element.outerHTML = `
        <div class="whatever">
            <p>${message}</p>
        </div>
    `;
}

댓글로 여러분의 생각을 알려주세요! ❤️

위 내용은 이미지와 같은 지연 로드 스크립트의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!