프런트엔드 프로젝트의 이미지 로딩 최적화 방법

이번에는 프론트엔드 프로젝트에서의 이미지 로딩 최적화 방법을 가져오겠습니다. 프론트엔드 프로젝트에서 이미지 로딩 최적화 방법에 대한 주의사항은 무엇입니까? 다음은 실제 사례입니다. 그림은 인터페이스 표시 효과에서 매우 중요한 부분입니다. 그림 로딩은 사용자 경험 및 애플리케이션 성능과 관련이 있습니다. 그림 로딩을 최적화하는 일반적인 전략은 사전 로딩과 지연 로딩입니다.

이미지 사전 로드는 사용자 경험을 향상시킬 수 있으며, 특히 이미지 비율이 높은 이미지 갤러리 및 웹 콘텐츠에 중요합니다.

css 사전 로드

이미지를 사전 로드하려면 CSS의 배경 속성을 사용하되 화면 위치에 표시하지는 마세요. 이러한 이미지를 사용할 때 경로가 일관되면 브라우저는 표시를 위해 캐시에 이미지를 로드하는 데 우선 순위를 부여하므로 사전 로드의 목적이 달성됩니다

#preload-img{
background: url(http://example.com/image.png) no-repeat -9999px -9999px;
}

그러나 이 방법은 페이지가 표시될 때 다른 콘텐츠 표시에 영향을 미칩니다. 먼저 로드된 일부 js

window.onload = function () {    let preload = document.createElement('div');
    preload.id = 'preload';    document.body.appendChild(preload);
}

pure js preloading

js를 사용하여 이미지 개체를 인스턴스화한 다음 애플리케이션 주소를 할당하면 일괄 이미지 사전 로드

window.onload = function () {    let images = [        'http://example.com/image1.png',        'http://example.com/image2.png',        'http://example.com/image3.png',
    ];
    images.forEach((src) => {
        preload(src);
    })
}let preload = src => {    let img = new Image();
    img.src = src;
}

lazy loading

이미지의 지연 로딩이 서버에 대한 부담을 줄일 수 있습니다. .

이전에는 js

디자인 모드

- 프록시 모드 에서 가상 프록시를 통해 이미지 지연 로딩을 구현하는 방법이 있었습니다.

let imageEle = (function(){    let node = document.createElement('img');    document.body.appendChild(node);    return {        setSrc:function(src){
            node.src = src;
        }
    }
})();//代理对象let proxy = (function(){    let img = new Image();
    img.onload = function(){
        imageEle.setSrc(this.src);
    };    return {        setSrc:function(src){
            img.src = src;
            imageEle.setSrc('loading.gif');
        }
    }
})();
proxy.setSrc('example.png');

내용이 긴 일부 페이지의 경우 사용자가 이미지를 로드할 때 이미지가 로드되기를 바랍니다. 일반적으로 사용되는 방법입니다. 해결 방법은 img 요소에 data-src 속성을 사용하여 src를 대체하고 img 요소가 있는 것으로 판단되면 해당 이미지를 표시하도록 src 속성을 동적으로 할당하는 것입니다. 사용자의 가시 영역.

그림 월 페이지인 경우 모든 그림이 로드되는 것을 방지하려면 그림의 기본 높이를 설정해야 합니다

.img{    min-height: 400px;
}

스크롤 이벤트 설정

let imgs = document.getElementsByTagName("img");let n = 0; //存储加载图片索引let lazyload= ()=> {    let cHeight = document.documentElement.clientHeight;    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //滚动条距离顶部高度
    for (let i = n,l = imgs.length; i < l; i++) {        let img = imgs[i];        if (img.offsetTop < cHeight + scrollTop) {
            img.src = img.src == &#39;loading.gif&#39;? img.getAttribute(&#39;data-src&#39;):img.src;
            n = i + 1;
        }
    }
}window.onscroll = lazyload;

스크롤 이벤트는 기능을 조절한 다음 최적화할 수 있습니다.

이미지 로딩을 올바르게 사용하면 페이지 표시 효과를 보장하는 동시에 서버에 대한 부담을 어느 정도 완화하는 것이 프런트엔드 최적화에 자주 포함되는 부분입니다. 솔루션과 전략을 이해하는 데 도움이 될 수 있습니다. 더 좋은 제품을 만드세요.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

JS 상속에 대한 자세한 설명

JS 함수 조절 사용하기

JS 코드를 사용하여 사격 효과 만들기

위 내용은 프런트엔드 프로젝트의 이미지 로딩 최적화 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!