jquery를 사용하여 이미지 미리로드

Question

내 웹 페이지에서 일부 이미지가 IE에서로드하는 데 시간이 많이 걸립니다. 내 페이지에서 이미지를 미리로드하는 데이 파일을 사용했습니다.하지만 여전히 문제가 지속됩니다. 제안 사항이 있습니까?

function preload(arrayOfImages) { 
    $(arrayOfImages).each(function(){ 
     $('<img/>')[0].src = this; 
    }); 
    alert("Done Preloading..."); 
} 

// Usage: 

preload([ 
    '/images/UI_1.gif', 
    '/images/UI_2.gif', 
    '/images/UI_3.gif', 
    '/images/UI_4.gif', 
    '/images/UI_5gif', 
    '/images/UI_6.gif', 
    '/images/UI_7.gif', 
    '/images/UI_8.gif', 
    '/images/UI_9.gif' 
]); 

<

DIV>

Answer 1

// Create an image element 
var image1 = $('<img />').attr('src', 'imageURL.jpg'); 

// Insert preloaded image into the DOM tree 
$('.profile').append(image1); 
// OR 
image1.appendTo('.profile'); 

그러나이 완료되면 가장 좋은 방법은 응용 프로그램에 미리로드 된 이미지를 삽입 있도록 콜백 함수를 사용하는 것입니다 로드. 이를 위해 단순히 .load() jQuery 이벤트를 사용하십시오.

// Insert preloaded image after it finishes loading 
$('<img />') 
    .attr('src', 'imageURL.jpg') 
    .load(function(){ 
     $('.profile').append($(this)); 
     // Your other custom code 
    }); 

업데이트 # 1

function preload(arrayOfImages) { 
    $(arrayOfImages).each(function(index){ 
     $('<img />') 
     .attr('src', arrayOfImages[index]) 
     .load(function(){ 
      $('div').append($(this)); 
      // Your other custom code 
     }); 
    }); 
    alert("Done Preloading..."); 
} 

// Usage: 

preload([ 
    '/images/UI_1.gif', 
    '/images/UI_2.gif', 
    '/images/UI_3.gif', 
    '/images/UI_4.gif', 
    '/images/UI_5gif', 
    '/images/UI_6.gif', 
    '/images/UI_7.gif', 
    '/images/UI_8.gif', 
    '/images/UI_9.gif' 
]); 

Answer 2

이 jQuery 플러그인 사용 해보세요 : http://farinspace.com/jquery-image-preload-plugin/

그것은 당신이 선택기를 사용하여 img 요소를 잡고 그들을 미리로드 가질 수 있습니다.

$('#content img').imgpreload(function() 
{ 
    // this = jQuery image object selection 
    // callback executes when all images are loaded 
}); 

여전히 수동으로 이미지를 미리로드 할 수 있지만 : 나는 당신이 미리로드 할 이미지들이 있다면 그것은 당신이 수행 할 수 있습니다 당신이이 플러그인에 의해 관심이있을 수도의 HTML에 이미 있는지 확실하지 않습니다 파일 이름 :

$.imgpreload('/images/a.gif',function() 
{ 
    // this = new image object 
    // callback 
}); 

Answer 3

이미지 스프라이트는 엄청난 일을 속도 (하지만 당신은 ImageOptim 같은 것을 사용하여 압축 확인) 할 수 있습니다. 다음으로 CDN에있는 모든 이미지를 호스팅하십시오 (아마존 S3/CloudFront를 제안합니다). 마지막으로 아래 그림과 같이 모든 이미지를 미리로드하고 최대한 빨리 호출 해보십시오. 잘하면이 도움이됩니다!

function loadImages(){ 
    var images = [ 
     'http://cdn.yourdomain.com/img/image1.png', 
     'http://cdn.yourdomain.com/img/image2.jpg', 
     'http://cdn.yourdomain.com/img/image3.jpg', 
     'http://cdn.yourdomain.com/img/image4.jpg' 
    ]; 
    $(images).each(function() { 
     var image = $('<img />').attr('src', this); 
    }); 
}