Mozilla Firefox에서 최종 이미지 결과를 사전로드하도록하려면 어떻게해야합니까?

Question

JavaScript를 사용하여 이미지를 미리로드하려고합니다. 다른 장소에서 이미지 링크와 함께 다음과 같이 내가 배열을 선언 :

var imageArray = new Array(); 
imageArray[0] = new Image(); 
imageArray[1] = new Image(); 
imageArray[2] = new Image(); 
imageArray[3] = new Image(); 
imageArray[0].src = "http://www.bollywoodhott.com/wp-content/uploads/2008/12/arjun-rampal.jpg"; 
imageArray[1].src = "http://labelleetleblog.files.wordpress.com/2009/06/josie-maran.jpg"; 
imageArray[2].src = "http://1.bp.blogspot.com/_22EXDJCJp3s/SxbIcZHTHTI/AAAAAAAAIXc/fkaDiOKjd-I/s400/black-male-model.jpg"; 
imageArray[3].src = "http://www.iill.net/wp-content/uploads/images/hot-chick.jpg"; 

이미지 페이드 내가 처음 3 개 이미지를 제대로이 배열 작업을 사용하고 오전 변환 효과,하지만 마지막 하나, imageArray[3]를 들어, 실제 이미지 데이터는 AFTERWARDS를로드하기 때문에 이미지의 실제 이미지 데이터는 미리로드되지 않고 완전히 사라집니다.

마지막 링크 http://www.iill.net/wp-content/uploads/images/hot-chick.jpg이 이미지에 대한 직접 링크가 아니기 때문에 이런 현상이 발생합니다. 해당 링크로 이동하면 브라우저가 사용자를 실제 위치로 리디렉션합니다. 이제 Chrome에서 내 이미지 미리로드 코드가 완벽하게 작동하고 효과가 멋지게 보입니다. Chrome이 실제 데이터 (프리젠 테이션 될 이미지)를 사전로드하는 것 같습니다. 즉, Chrome에서 '내 대역폭 훔치기 중지'로 리디렉션되는 이미지를 미리로드 한 경우 미리로드 된 이미지는 '내 횡단 도용 중지'입니다.

Firefox가 동일한 방식으로 작동하도록 코드를 수정하려면 어떻게해야합니까?

Answer 1

이유없이 소스 페이지에 이미지를 넣어 숨길하지 않습니다

<img src='' id='preLoadImage1' style='display: none' /> 

을 지금, 당신의 자바 스크립트로드 이미지 :

document.getElementById('preLoadImage1').src = ''; 

을 그럼 당신은 할 수 있습니다 나중에이 img를 div 안에 넣으십시오.

Answer 2

나는이 문제의 잘못된면에 있다고 생각합니다 ~ 당신이 사용하는 방법은 결국 이미지의 호스트에 의해 반대 될 수 있습니다. 제어하는 ​​호스트에 복사본을 저장하지 않으시겠습니까?

는 파이어 폭스 이미지를 캐시받을 수

<img src="hotlink" style="visibility:hidden;position:absolute;margin-top:-1000px;" /> 

을 시도 할 수 말했다.

Answer 3

관련 이미지가 포함 된 li 요소를 가진 ul 자식을 사용하는 것이 좋습니다. ul을 display: none (또는 페이지에서 벗어나)으로 지정하면 사용자가 본질적으로 보이지 않더라도 브라우저에서 이미지를로드해야합니다. 현재 코드, 그 일의

약간 지저분한 방법으로, 관련 JS 아래 JS Fiddle에 예시되어있다 : 분명히

var imageArray = new Array(); 
imageArray[0] = new Image(); 
imageArray[1] = new Image(); 
imageArray[2] = new Image(); 
imageArray[3] = new Image(); 

imageArray[0].src = "http://www.bollywoodhott.com/wp-content/uploads/2008/12/arjun-rampal.jpg"; 
imageArray[1].src = "http://labelleetleblog.files.wordpress.com/2009/06/josie-maran.jpg"; 
imageArray[2].src = "http://1.bp.blogspot.com/_22EXDJCJp3s/SxbIcZHTHTI/AAAAAAAAIXc/fkaDiOKjd-I/s400/black-male-model.jpg"; 
imageArray[3].src = "http://www.iill.net/wp-content/uploads/images/hot-chick.jpg"; 

// the below stuff is the new: 

var newList = document.createElement('ul'); 
newList.setAttribute('id', 'imgPreload'); 

var preload = document.getElementById('preload'); 
preload.appendChild(newList); 
var imgPreload = document.getElementById('imgPreload'); 

var li = document.createElement('li'); 

for(i=0; i<imageArray.length; i++){ 
    imgPreload.appendChild(li).appendChild(imageArray[i]); 
} 

위에서 생성 된 ul을 숨기지 않지만, 데모의이 보여 동적으로 생성하는 방법 중 하나. 물론 필자는 Chrome에서 아직까지 테스트 해 보았습니다.