你可以在HTML中加载图片，使用CSS display:none;规则，然后显示他们当你想用js或jquery

不使用js或jquery函数预加载只是一个css规则Vs多行js被执行

例如:Html

<img src="someimg.png" class="hide" alt=""/>

Css:

.hide{
display:none;
}

jQuery:

//if want to show img 
$('.hide').show();
//if want to hide
$('.hide').hide();

通过jquery/javascript预加载图像是不好的，因为图像需要几毫秒的时间来加载页面+你有几毫秒的时间来解析和执行脚本，特别是如果它们是大图像，所以隐藏在hml中对性能也更好，因为图像是真正的预加载而不可见，直到你显示出来!

使用JavaScript图像对象。

这个函数允许你在加载所有图片时触发一个回调。但是，请注意，如果至少有一个资源没有加载，它将永远不会触发回调。这可以通过实现onerror回调和增加加载值或处理错误来轻松修复。

var preloadPictures = function(pictureUrls, callback) {
    var i,
        j,
        loaded = 0;

    for (i = 0, j = pictureUrls.length; i < j; i++) {
        (function (img, src) {
            img.onload = function () {                               
                if (++loaded == pictureUrls.length && callback) {
                    callback();
                }
            };

            // Use the following callback methods to debug
            // in case of an unexpected behavior.
            img.onerror = function () {};
            img.onabort = function () {};

            img.src = src;
        } (new Image(), pictureUrls[i]));
    }
};

preloadPictures(['http://foo/picture.bar', 'http://foo/picture.bar', 'http://foo/picture.bar', 'http://foo/picture.bar'], function(){
    console.log('a');
});

preloadPictures(['http://foo/picture.bar', 'http://foo/picture.bar', 'http://foo/picture.bar', 'http://foo/picture.bar'], function(){
    console.log('b');
});

JP，在检查了您的解决方案后，我仍然在Firefox中有问题，在加载页面之前它不会预加载图像。我是通过在服务器端脚本中添加一些sleep(5)来发现这一点的。我实施了以下解决方案的基础上，似乎解决这个问题。

基本上，我添加了一个回调到你的jQuery预加载插件，这样它就会在所有图像都正确加载后被调用。

// Helper function, used below.
// Usage: ['img1.jpg','img2.jpg'].remove('img1.jpg');
Array.prototype.remove = function(element) {
  for (var i = 0; i < this.length; i++) {
    if (this[i] == element) { this.splice(i,1); }
  }
};

// Usage: $(['img1.jpg','img2.jpg']).preloadImages(function(){ ... });
// Callback function gets called after all images are preloaded
$.fn.preloadImages = function(callback) {
  checklist = this.toArray();
  this.each(function() {
    $('<img>').attr({ src: this }).load(function() {
      checklist.remove($(this).attr('src'));
      if (checklist.length == 0) { callback(); }
    });
  });
};

出于兴趣，在我的背景下，我使用这个方法如下:

$.post('/submit_stuff', { id: 123 }, function(response) {
  $([response.imgsrc1, response.imgsrc2]).preloadImages(function(){
    // Update page with response data
  });
});

希望这能帮助那些从谷歌(和我一样)来到这个页面，寻找在Ajax调用上预加载图像的解决方案的人。

我有一个小插件处理这个。

它被称为waitForImages，它可以处理img元素或CSS中任何引用图像的元素，例如div {background: url(img.png)}。

如果你只是想加载所有的图像，包括在CSS中引用的图像，这里是你如何做的:)

$('body').waitForImages({
    waitForAll: true,
    finished: function() {
       // All images have loaded.
    }  
});

我想用谷歌地图API自定义覆盖来做到这一点。他们的示例代码简单地使用JS插入IMG元素，并显示图像占位符框，直到图像被加载。我在这里找到了一个适合我的答案:https://stackoverflow.com/a/10863680/2095698。

$('<img src="'+ imgPaht +'">').load(function() {
$(this).width(some).height(some).appendTo('#some_target');
});

这将像前面建议的那样预加载图像，然后在加载img URL后使用处理程序追加img对象。jQuery的文档警告说，缓存的图像不能很好地与这个事件/处理程序代码一起工作，但它在FireFox和Chrome中为我工作，我不必担心IE。

谢谢你!我想在J-P的答案上添加一个小riff -我不知道这是否会帮助任何人，但这样你就不必创建一个图像数组，如果你的拇指正确命名，你可以预加载所有的大图像。这很方便，因为我有一个用html编写所有页面的人，它可以确保他们少做一步——消除创建图像数组的需要，以及另一个可能会搞砸的步骤。

$("img").each(function(){
    var imgsrc = $(this).attr('src');
    if(imgsrc.match('_th.jpg') || imgsrc.match('_home.jpg')){
      imgsrc = thumbToLarge(imgsrc);
      (new Image()).src = imgsrc;   
    }
});

基本上，对于页面上的每张图像，它都会抓取每张图像的src，如果它符合某些条件(是拇指，或主页图像)，它会更改名称(图像src中的基本字符串替换)，然后加载图像。

在我的例子中，页面上满是拇指图像，它们的名称都类似image_th.jpg，而所有相应的大图像的名称都是image_lg.jpg。thumb to large只是将_th.jpg替换为_lg.jpg，然后预加载所有大图像。

希望这能帮助到一些人。