[JQUERY] 자바 스크립트 / jQuery를 사용하여 프리로드 이미지에 결정적인 가장 좋은 방법은?

자바 스크립트 / jQuery를 사용하여 프리로드 이미지에 결정적인 가장 좋은 방법은?

해결법

1. ---

   1.불행하게도, 그 목적에 따라 달라집니다. 당신이 스타일을 목적으로 이미지를 사용하려는 경우, 당신의 가장 좋은 방법은 스프라이트를 사용하는 것입니다. http://www.alistapart.com/articles/sprites2

   불행하게도, 그 목적에 따라 달라집니다. 당신이 스타일을 목적으로 이미지를 사용하려는 경우, 당신의 가장 좋은 방법은 스프라이트를 사용하는 것입니다. http://www.alistapart.com/articles/sprites2

   그러나, 당신은 태그, 당신은 할 수 있습니다 미리로드를로의 이미지를 사용하려면

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

   (수정 된 소스 자바 스크립트에서 여러 개의 이미지를 미리로드하는 가장 좋은 방법은 무엇에서 가져온?)

   새 이미지 ()를 사용하여 DOM 방법하지만 큐에 추가됩니다 지정된 이미지에 대한 새로운 요청을 사용하는 비용을 포함하지 않습니다. 이미지이기 때문에,이 시점에서, 실제로 페이지에 추가되지, 반군 재 렌더링이 없습니다. 나는 페이지의 끝 (스크립트의 모든이어야하는 가능) 더 중요한 요소를 들고 것을 방지하기 위해이 추가 그러나 추천 할 것입니다.

   편집 : 편집은 별도의 이미지 오브젝트가 제대로 작동하려면 필요하다는 지적 아주 제대로 의견을 반영합니다. 감사합니다, 더 밀접하게 확인하지 않는 내 나쁜.

   EDIT2가 : 재사용이 더 분명하게 편집

   편집 3 (3 년 이상) :

   브라우저가 보이지 않는 이미지를 처리하는 방법의 변화로 인해 : 사전 로딩에 대한 새로운 접근 방식 (화면이 답변에서와 같이 없음을하거나, 문서에 추가되지 않음) 바람직하다.

   당신은 이미지의 조기 검색을 강제로 Ajax 요청을 사용할 수 있습니다. 예를 들어, jQuery를 사용하여 :

   jQuery.get(source);
   

   또는 이전 예제의 맥락에서, 당신은 할 수 있습니다 :

   function preload(sources)
   {
     jQuery.each(sources, function(i,source) { jQuery.get(source); });
   }
   

   이-이기 때문에 괜찮 스프라이트의 경우에는 적용되지 않습니다. 이것은 단지 이미지들이 처음에 표시되지 않기 때문에로드되지 않은 이미지 사진 갤러리 또는 슬라이더 / 회전 목마 같은 것들입니다.

   또한,이 방법은 (AJAX는 통상 화상 데이터를 검색하는 데 사용되지 않는다) IE에 대한 작업을하지 않는다.

2. ---

   2.스프라이트

   스프라이트

   다른 언급으로 그 인 것을 만들어으로, 스프라이트의 작품을 아주 잘하는 이유는 다양하지만, 그것은 좋은으로하지 않습니다.

   불규칙한 모양 다루기 까다로운하지만입니다. 새로운 하나에 모든 새로운 이미지를 결합하는 것은 또 다른 골칫거리입니다.

   태그를 사용하여 낮은 잭 접근

   당신이 가장 확실한 해결책을 찾고 있다면 당신은 내가 여전히 선호 낮은 잭 접근 방식으로 가야한다. 문서의 끝 부분에있는 이미지에 대한 링크를 만들고 1x1 픽셀의 폭과 높이를 설정하고 추가로 숨겨진 DIV에 넣어. 가 페이지의 끝 부분에있는 경우, 그들은 다른 콘텐츠 후로드됩니다.

3. ---

   3.월으로 방법 2013 아무도 여기 그래서 여기 대신, 테스트 및 크롬 25, 파이어 폭스 (18) 용도 jQuery를 부하 이벤트 단점 해결하려면이 플러그인 작업 무슨 짓을했는지, 나를 위해 일하지 설명했다

   월으로 방법 2013 아무도 여기 그래서 여기 대신, 테스트 및 크롬 25, 파이어 폭스 (18) 용도 jQuery를 부하 이벤트 단점 해결하려면이 플러그인 작업 무슨 짓을했는지, 나를 위해 일하지 설명했다

   function preload(sources, callback) {
       if(sources.length) {
           var preloaderDiv = $('<div style="display: none;"></div>').prependTo(document.body);
   
           $.each(sources, function(i,source) {
               $("<img/>").attr("src", source).appendTo(preloaderDiv);
   
               if(i == (sources.length-1)) {
                   $(preloaderDiv).imagesLoaded(function() {
                       $(this).remove();
                       if(callback) callback();
                   });
               }
           });
       } else {
           if(callback) callback();
       }
   }
   

   용법:

   preload(['/img/a.png', '/img/b.png', '/img/c.png'], function() { 
       console.log("done"); 
   });
   

   캐시가 비활성화 된 경우 당신이 그렇게 마음에 계속, 개발자 도구가 열려 때 크롬에 기본적으로 인 혼합 된 결과를 얻을 수 있습니다.

4. ---

   4.제 생각에는, 사용하는 여러 부분 XMLHttpRequest의 다음과 같은 년에서 선호하는 솔루션이 될 것입니다 일부 도서관 소개했다. 그러나 IE

   제 생각에는, 사용하는 여러 부분 XMLHttpRequest의 다음과 같은 년에서 선호하는 솔루션이 될 것입니다 일부 도서관 소개했다. 그러나 IE

5. ---

   5.시간이 오래 나는 아직도 이미지를 사전로드에 관심이 얼마나 많은 사람들이 몰라 그래서 전에서였다.

   시간이 오래 나는 아직도 이미지를 사전로드에 관심이 얼마나 많은 사람들이 몰라 그래서 전에서였다.

   내 솔루션은 훨씬 더 간단했다.

   난 그냥 CSS를 사용했다.

   #hidden_preload {
       height: 1px;
       left: -20000px;
       position: absolute;
       top: -20000px;
       width: 1px;
   }
   

6. ---

   6.이로드 된 후 여기에 이미지에 페이드 내 간단한 솔루션을 간다.

   이로드 된 후 여기에 이미지에 페이드 내 간단한 솔루션을 간다.

       function preloadImage(_imgUrl, _container){
           var image = new Image();
               image.src = _imgUrl;
               image.onload = function(){
                   $(_container).fadeTo(500, 1);
               };
           }
   

7. ---

   7.내 사용 사례를 들어 나는 프리로드에 싶다고 전체 화면 이미지 회전 목마를했다. 이미지가 순서대로 표시하고 부하에 몇 초 각 걸릴 수 있기 때문에, 내가 순차적 순서로로드하는 것이 중요합니다.

   내 사용 사례를 들어 나는 프리로드에 싶다고 전체 화면 이미지 회전 목마를했다. 이미지가 순서대로 표시하고 부하에 몇 초 각 걸릴 수 있기 때문에, 내가 순차적 순서로로드하는 것이 중요합니다.

   이를 위해 나는 비동기 라이브러리의 폭포를 () 사용 방법 (https://github.com/caolan/async#waterfall)

           // Preload all images in the carousel in order.
           image_preload_array = [];
           $('div.carousel-image').each(function(){
               var url = $(this).data('image-url');
               image_preload_array.push(function(callback) {
                   var $img = $('<img/>')
                   $img.load(function() {
                       callback(null);
                   })[0].src = url;
               });
           });
           async.waterfall(image_preload_array);
   

   기능의 배열을 만들어이 작업은, 각각의 기능은 어레이 내의 다음 함수를 호출하기 위해 실행하는 데 필요한 매개 변수 콜백 ()를 통과한다. 콜백의 최초의 파라미터 ()는 비 - 널 값이 제공되는 경우 우리가 널마다 통과되도록 상기 시퀀스를 종료한다 에러 메시지이다.

8. ---

   8.이것 좀 봐:

   이것 좀 봐:

   http://www.mattfarina.com/2007/02/01/preloading_images_with_jquery

   SO에 대한 질문을 관련 :

   JQuery와 숨겨진 프리로드

from https://stackoverflow.com/questions/901677/the-definitive-best-way-to-preload-images-using-javascript-jquery by cc-by-sa and MIT license