使用前预加载图像

Question

我使用的图像在单击时需要更改，而我使用的是JavaScript onclick。 我第一次在加载图像时进行了短暂的“轻拂”，但这仅在第一次时发生。 有没有一种方法可以预加载第二张图像，以便在第一次更改时像其他所有图像一样平滑地进行更改？

Answer 1

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

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

#preload-01 { background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px; }
#preload-02 { background: url(http://domain.tld/image-02.png) no-repeat -9999px -9999px; }
#preload-03 { background: url(http://domain.tld/image-03.png) no-repeat -9999px -9999px; }

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

方法2：仅JavaScript

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"
)

资料来源： 易腐新闻

Answer 2

就像是 ：

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();
       }
    }
}