使用前预先加载图像

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的背景属性在后台预加载选择的图像。然后，只要这些图像的路径在网页中的其他地方被引用时保持不变，浏览器将在呈现页面时使用预加载/缓存的图像。简单，有效，无需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"
)

来源： Perishable Press

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