이미지 미리로드 ... 가장 빠른 방법

나는 높은 트래픽 웹 페이지 (매우 높음!)를 다루는 프로젝트를 진행하고 있습니다. 랜딩 페이지에서 페이드 인 (pading)으로 페이지를 표시하기 위해로드 된 직후 이미지 톤이 표시됩니다 (~ 40). 페이지가 준비되기 전에로드해야하므로 라이브러리를 사용하지 않습니다. 사용. 우리는 4 개의 이미지 서버를 가지고 있습니다. 아무도 이미지를로드하는 가장 좋은 방법 인 경험이 있습니까? 바로 <head> 후,이미지 미리로드 ... 가장 빠른 방법

페이지 헤더에서 스크립트 태그를 삽입 : 나는 다음을 시도

<script> 
    var img = new Image(); img.src= "src of the image"; 
</script>

가 그렇게를, 이미지는 시작과 마무리 DOMReady 및로드 이벤트 전에로드 할 수 있습니다. 그러나 동일한 URL이있는 페이지의 이미지는 이전에로드 된 경우에도 다시로드되는 것처럼 보입니다. URL은 동일하고, 캐싱이 켜져 있고, 모질라가 사용되었습니다.

브라우저가 해당 이미지를 사용하지 못하게하는 메커니즘이 있습니까? 또는 무엇을? 또 다른 질문 : DOM과 이미지가 동시에로드 될 때 속도 저하가 발생합니까?

출처

2012-03-07 zak

것은 당신이 CDN을 사용하고

편집

여기에 많은 이미지를 미리로드하는 방법? –

먼저 CSS 스프라이트를 사용하는 것이 좋습니다. 여기에서 자세한 정보를 찾을 수 있습니다 :

http://www.alistapart.com/articles/sprites

둘째, 다음, 준비가 DOM에 이미지를로드 사용하려면 :

function listen(event, elem, func) { 
    if (elem.addEventListener) { 
    elem.addEventListener(event, func, false); 
    } else if (elem.attachEvent) { 
    elem.attachEvent('on' + event, func); 
    } 
} 

listen('load', window, function() { 
    var img = new Image(); 
    img.src= "src of the image"; 
});

절반에 로딩 시간을 절감 할 스프라이트를 사용. 대부분의 HTTP 요청을 제거하면 스프라이트 시트가 즉시 캐시되어 사용자가 방문하는 각 페이지에 이미로드되어 있습니다.

function preload(images) { 
    if (document.images) { 
    var imageArray = []; 
    imageArray = images.split(','); 
    var imageObj = new Image(); 
    for (var i = 0; i < imageArray.length; i += 1) { 
     imageObj.src = imageArray[i]; 
    } 
    } 
}

콜과 같이 기능 :

preload('image1.jpg,image2.jpg,image3.jpg');

출처

2012-03-07 15:42:00

이 답변은 이미지를 사전로드하지 않습니다. 스프라이트는 갈 방향이지만,이 대답이 사전로드 문제를 어떻게 해결하는지 알지 못합니다. – jfriend00

DOM을 준비한 후 이미지가로드 된 경우, 특히 페이지의 이미지가 많은 경우 사용자 환경이 개선 될 것으로 생각됩니다. 미리로드 할 때 이미지를로드 할 때까지 기다렸다가 사이트를 볼 수 있습니다. –

왜 이미지를 미리로드하면 사용자가 옵션보다 오래 기다리게됩니까? 이미지를 미리로드하는 아이디어는 더 빨리 사용할 수 있고 사용자가 더 적은 시간을 기다려야한다는 것입니다. 페이지의 HTML은 이미지가로드되기 전에 사용자 상호 작용이 가능할 때까지 기다리지 않습니다. – jfriend00

이미지 미리로드 ... 가장 빠른 방법

답변

관련 문제