Javascript 在使用前预加载图像

我正在使用一个图像，当你点击它时，它需要改变，为此，我正在使用JavaScript onclick。有一个简短的“轻弹”我第一次这样做，而它加载的图像，但这只发生在第一次。是否有一种方法可以预加载第二个图像，以便第一次更改时与所有其他图像一样平滑？

类似于：

image = new Image(); 
image.src = "image.jpg";
image.onLoad = function(){
   alert("image ready");
}

或使用更多图像：

function all_images_preloaded(){
  alert("all images are ready to use");
}

var imgs = [
  "image1.jpg"
  , "image2.jpg"
  , "image3.jpg"
];

var count = imgs.length;
var count_loaded = 0;
for(i in imgs){
    image = new Image(); 
    image.src = "image.jpg";
    image.onLoad = function(){
       count_loaded++;
       if(count_loaded == count){
          all_images_preloaded();
       }
    }
}

---

预加载图像是改善用户体验的好方法。使用CSS、JavaScript或Ajax预加载图像有3种方法：

方法1：使用CSS和JavaScript预加载

#preload-01{背景：url(http://domain.tld/image-01.png)无重复-9999px-9999px；}
#预加载-02{背景：url(http://domain.tld/image-02.png)无重复-9999px-9999px；}
#预加载-03{背景：url(http://domain.tld/image-03.png)无重复-9999px-9999px；}

通过策略性地将预加载ID应用于现有（X）HTML元素，我们可以使用CSS的背景属性在背景中预加载屏幕外的选定图像。然后，只要这些图像的路径在网页中的其他位置被引用时保持不变，浏览器就会在呈现页面时使用预加载/缓存的图像。简单、有效且无需JavaScript

方法2：仅Javascript

var images=newarray（）
函数预加载（）{
对于（i=0；i

来源：

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(
    "http://domain.tld/gallery/image-001.jpg",
    "http://domain.tld/gallery/image-002.jpg",
    "http://domain.tld/gallery/image-003.jpg"
)