[javascript] 자바스크립트 지연 로딩을 사용하여 웹페이지의 폰트 로딩을 어떻게 지연시킬 수 있나요?
다음은 자바스크립트를 사용하여 폰트 로딩을 지연시키는 간단한 예제입니다.
// 웹폰트 로딩을 위한 비동기 함수 정의
function loadFont(url) {
var link = document.createElement('link');
link.href = url;
link.rel = 'stylesheet';
document.head.appendChild(link);
}
// 페이지가 로드된 후 웹폰트 로딩
window.addEventListener('load', function() {
// 원하는 폰트의 URL을 지정하여 로딩 시작
loadFont('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
});
위 코드는 window의 load 이벤트를 사용하여 페이지가 로드된 후에 폰트를 비동기적으로 로딩합니다. 이를 통해 페이지 로딩 시간을 최적화할 수 있습니다.
이러한 지연 로딩은 사용자가 페이지를 빠르게 볼 수 있도록 하고, 웹폰트 로딩으로 인한 성능 저하를 최소화하는 데 도움이 됩니다.
출처: Web Fundamentals, Google Developers