미리로드 된 이미지에 액세스

Question

이미지를 미리로드하는 here 스크립트를 발견했지만 어떻게 액세스 할 수 있는지 잘 모릅니다.

(function($) { 
    var cache = []; 
    // Arguments are image paths relative to the current page. 
    $.preLoadImages = function() { 
    var args_len = arguments.length; 
    for (var i = args_len; i--;) { 
     var cacheImage = document.createElement('img'); 
     cacheImage.src = arguments[i]; 
     cache.push(cacheImage); 
    } 
    } 
})(jQuery) 

즉, preload가 완료되면 chace [i]를 취하여 div에 추가합니다. 어떤 아이디어?

Answer 1

load 이벤트를 사용할 수 있습니다. 예 here.

HTML :

<div id="test"></div> 

자바 스크립트 :

(function($) { 
    var cache = []; 
    // Arguments are image paths relative to the current page. 
    $.preLoadImages = function() { 
    var args_len = arguments.length; 
    for (var i = args_len; i--;) { 
     var cacheImage = document.createElement('img'); 
     cacheImage.src = arguments[i]; 
     cache.push(cacheImage); 
     $(cacheImage).load(function() { 
      if(cache.length == args_len) { 
       $(cache).each(function() { 
        $('#test').append(this); 
       }); 
      } 
     }); 
    } 
    } 
    $.preLoadImages(
     "http://images.free-extras.com/pics/c/car-530.jpg", 
     "http://images.free-extras.com/pics/c/car-529.jpg", 
     "http://images.free-extras.com/pics/c/cars-528.jpg" 
); 
})(jQuery);