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

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

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

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

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

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

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

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

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

좋아요. 하지만 실행하려는 자바스크립트를 인라인해야 하는데 어떻게 해결할 수 있을까요?

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

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

좋아, 여기서 무슨 일이 일어나고 있는 걸까요!?

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

// some-component.js

export default element => {
    element.outerHTML = `
        

            
Hello world!
        
    `;
}

따라서 onerror 콜백에서 이를 기본 내보내기에 대한 인수로 전달했다는 것을 눈치채셨을 것입니다. 내가 this (말장난 죄송하지만?) 한 이유는 그것을 호출한 를 스크립트에 제공하기 위한 것이었습니다. 왜냐하면 this (내가 다시 했죠?) context this = .

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

캐싱 및 인수 전달

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

":" 다음의 문자열은 서로 다르기만 하면 무엇이든 될 수 있습니다.

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

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

export default element => {
    const { message } = element.dataset
    element.outerHTML = `
        

            
${message}
        
    `;
}

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