JS 이미지 사전 로딩이 차단되었나요?

Question

나는 라이트박스라는 JQuery 플러그인 (정말 대단하네요).문제는 외부 사이트의 이미지에 액세스하고 있는데 그런 것 같아요. 라이트박스가 미리 로드되지 않도록 차단.

특히 Picasa가 프리로더에 404(firebug 사용)를 제공하는 것을 확인했지만, Firebug "net" 탭에서 실패한 요청을 마우스 오른쪽 버튼으로 클릭하고 "새 탭에서 열기"를 클릭하면 이미지가 제대로 로드됩니다.

이미 본 적이 없는 한 Picasa의 모든 이미지에서 이러한 현상이 발생합니다(이 경우 이미지를 다시 로드하는 것이 아니라 브라우저 캐시에서 가져온 것으로 생각됩니다).

브라우저에서 보낸 헤더와 프리로더(또한 Firebug에서 보낸 헤더) 사이에는 몇 가지 차이점이 있습니다.

프리로더의 "Accept" 헤더는 다음과 같습니다.

image/png,image/*;q=0.8,*/*;q=0.5

vs 브라우저에서 직접 이미지 로드:

text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8

나는 이것이 원격 서버가 자바스크립트와 브라우저 요청을 구별할 수 있는 한 가지 방법이라고 생각합니다.어떻게 생각하나요?

또한 여기에 플러그인의 프리로더 코드가 있습니다.혹시라도

// Image preload process
var objImagePreloader = new Image();
objImagePreloader.onload = function() {
    $('#lightbox-image').attr('src',settings.imageArray[settings.activeImage][0]);
    // Perfomance an effect in the image container resizing it
    _resize_container_image_box(objImagePreloader.width,objImagePreloader.height);
    //  clear onLoad, IE behaves irratically with animated gifs otherwise
    objImagePreloader.onload=function(){};
};
objImagePreloader.src = settings.imageArray[settings.activeImage][0];

업데이트

분명히 Picasa는 DOM의 일부이거나 자바스크립트를 통해 미리 로드된 전체 크기 이미지를 표시하는 것을 차단하고 있습니다.이것에 대해 어떻게 해야할지 모르겠어요

Answer 1

해결책

Picasa에서는 외부 사이트에서 최대 800px 너비의 이미지를 로드할 수 있습니다.외부 도메인(picasaweb.google.com 아님)에서 이보다 큰 도메인을 사용하려고 하면 404 오류가 발생합니다.

다행히 나에게는 800px이면 충분하다...원본을 로드하려고 했을 뿐인데 전혀 허용되지 않는 작업입니다 하하

Answer 2

JavaScript로 태그를 로드하는 대신 언제든지 숨겨진 DIV의 DOM에 미리 로드된 IMG 태그를 추가할 수 있습니다.그런 식으로 브라우저는 "자연스럽게" 로드합니다.