자바 스크립트 및 for 루프로 페이지로드 후 이미지 미리로드

Question

현재 웹 페이지 사진 갤러리를 만들고 있습니다. 페이지로드 후 이후 Javascript 으로 미리로드하고 싶은 이미지가 있습니다. 배열에서 HTML 링크의 실제 목록이 너무 길어서 루프가 for 개가 될 수 있습니까? 내 아래 코드를 참조하십시오. for 루프로 잘못하고있는 것에 대한 유용한 통찰력은 대단히 감사하겠습니다! 고맙습니다!!

<script type="text/javascript"> 
    function preloader() { 
     var images = new Array() 
     function preload() { 
      for (i = 0; i < preload.arguments.length; i++) { 
       images[i] = new Image() 
       images[i].src = preload.arguments[i] 
      } 
     } 
     preload(
      var i=1; 
      "http://example.com/images/gallery/elephants-" + for (i=1;i<=5;i++) {document.write(i);} + ".jpg", 
      "http://example.com/images/gallery/penguins-" + for (i=1;i<=2;i++) {document.write(i);} + ".png" 
     ) 
    } 

    function addLoadEvent(func) { 
     var oldonload = window.onload; 
     if (typeof window.onload != 'function') { 
      window.onload = func; 
     } else { 
      window.onload = function() { 
       if (oldonload) { 
        oldonload(); 
       } 
       func(); 
      } 
     } 
    } 
    addLoadEvent(preloader); 
</script> 

나는에 문제가 있어요 부분은 preload() 섹션에서 for 루프입니다. preload() 부분은 출력 /이 작업을 수행해야합니다

preload(
    "http://example.com/images/gallery/elephants-1.jpg", 
    "http://example.com/images/gallery/elephants-2.jpg", 
    "http://example.com/images/gallery/elephants-3.jpg", 
    "http://example.com/images/gallery/elephants-4.jpg", 
    "http://example.com/images/gallery/elephants-5.jpg", 
    "http://example.com/images/gallery/penguins-1.png", 
    "http://example.com/images/gallery/penguins-2.png" 
) 

Answer 1

당신은 함께 캐릭터 라인과 루프를 연결할 수 없습니다. 프리로드 함수를 호출하고 인수로 해당 배열을 전달하는 그런 apply를 사용

var i, urls = []; 
for(i = 1; i <= 5; i++) 
    urls.push('http://example.com/images/gallery/elephants-' + i + '.jpg'); 
for(i = 1; i <= 2; i++) 
    urls.push('http://example.com/images/gallery/penguins-' + i + '.jpg'); 

: 당신은 루프와 push 방법을 사용하여 문자열 배열을 구축해야합니다

preload.apply(null, urls); 

그래서

function preloader() { 
    var images = new Array() 
    function preload() { 
     for (i = 0; i < preload.arguments.length; i++) { 
      images[i] = new Image() 
      images[i].src = preload.arguments[i] 
     } 
    } 

    var i, urls = []; 
    for(i = 1; i <= 5; i++) 
     urls.push('http://example.com/images/gallery/elephants-' + i + '.jpg'); 
    for(i = 1; i <= 2; i++) 
     urls.push('http://example.com/images/gallery/penguins-' + i + '.jpg'); 

    preload.apply(null, urls); 
} 

Answer 2

당신은 제로 인수를 프리로드 기능을 정의한, 아직 여러 인수를 전달하려고 : 전체 프리 로더 기능이된다 프리로드 기능으로 uments. 또한 세미콜론을 사용하여 필수 쉼표 대신 매개 변수를 구분합니다.

이 작업을 수행하려면 preload 함수를 수정하여 함수에 전달되는 매개 변수의 수에 관계없이 반복 할 수있는 단일 배열 개체를 사용하는 것이 좋습니다. 다음은 예제 함수 정의입니다 :

function preload(arr) { 
    for(var i = 0; i < arr.length; i++) { 
     var img = document.createElement("img"); 
     img.setAttribute("style","display:none"); 
     img.setAttribute("src",arr[i]); 
     document.body.appendChild(img); 
    } 
} 

이 기능을 사용하려면, 당신은 배열을 표현하기 위해 자바 스크립트 객체 표기법을 사용하여 프리로드 기능으로, URL의 배열을 전달한다.

preload( 
    [ 
     "/images/first.png", 
     "/images/second.png", 
     "/images/third.png" 
    ] 
); 

이 어레이는 3 문자열을 포함하고, 3 개 스트링의 각각은 별도의 숨겨진 이미지 태그의 src 속성에 전달한다.

나의 구체적인 예와 관련하여 내 면책 조항은 IE의 특정 버전이 숨겨진 이미지를 캐시 할 수도 있고 캐시하지 않을 수도 있다는 것입니다. 원시 JavaScript로 작업 할 때마다 jQuery와 같은 라이브러리와는 달리 모든 브라우저에서 철저하게 테스트하여 솔루션과 상호 호환되는지 확인해야합니다. 아마도 올바른 매개 변수를 수락하도록 함수를 수정 한 다음 기존 기술을 사용하여 이미지를 사전로드 할 수 있습니다. 사용자가 지원하려는 모든 브라우저에서 작동하는 입증 된 솔루션이라면 가정합니다.