使用jQuery预加载图像

Question

使用jQuery预加载图像

我正在寻找一种使用JavaScript预加载图像的快捷方法。我正在使用jQuery，如果这很重要的话。

我在这里看到了这个（http：//nettuts.com ...）：

function complexLoad(config, fileNames) {
  for (var x = 0; x < fileNames.length; x++) {
    $("<img>").attr({
      id: fileNames[x],
      src: config.imgDir + fileNames[x] + config.imgFormat,
      title: "The " + fileNames[x] + " nebula"
    }).appendTo("#" + config.imgContainer).css({ display: "none" });
  }};

但是，它看起来有点过头了我想要的东西！

我知道有jQuery插件可以做到这一点，但它们看起来都有点大（大小）; 我只需要快速，简单和简短的预加载图像方式！

Answer 1

快速和简单的：function&nbsp;preload(arrayOfImages)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;$(arrayOfImages).each(function(){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$('<img/>')[0].src&nbsp;=&nbsp;this; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Alternatively&nbsp;you&nbsp;could&nbsp;use: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;(new&nbsp;Image()).src&nbsp;=&nbsp;this; &nbsp;&nbsp;&nbsp;&nbsp;});}//&nbsp;Usage:preload([ &nbsp;&nbsp;&nbsp;&nbsp;'img/imageName.jpg', &nbsp;&nbsp;&nbsp;&nbsp;'img/anotherOne.jpg', &nbsp;&nbsp;&nbsp;&nbsp;'img/blahblahblah.jpg']);或者，如果你想要一个jQuery插件：$.fn.preload&nbsp;=&nbsp;function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;this.each(function(){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$('<img/>')[0].src&nbsp;=&nbsp;this; &nbsp;&nbsp;&nbsp;&nbsp;});}//&nbsp;Usage:$(['img1.jpg','img2.jpg','img3.jpg']).preload();

Answer 2

JP，在检查了你的解决方案之后，我仍然在Firefox中遇到问题，在加载页面之前它不会预先加载图像。我sleep(5)在服务器端脚本中添加了一些内容。我实现了以下基于你的解决方案，似乎解决了这个问题。基本上我添加了一个回调你的jQuery preload插件，以便在所有图像正确加载后调用它。//&nbsp;Helper&nbsp;function,&nbsp;used&nbsp;below.//&nbsp;Usage:&nbsp;['img1.jpg','img2.jpg'].remove('img1.jpg');Array.prototype.remove&nbsp;=&nbsp;function(element)&nbsp;{ &nbsp;&nbsp;for&nbsp;(var&nbsp;i&nbsp;=&nbsp;0;&nbsp;i&nbsp;<&nbsp;this.length;&nbsp;i++)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(this[i]&nbsp;==&nbsp;element)&nbsp;{&nbsp;this.splice(i,1);&nbsp;} &nbsp;&nbsp;}};//&nbsp;Usage:&nbsp;$(['img1.jpg','img2.jpg']).preloadImages(function(){&nbsp;...&nbsp;}); &nbsp;&nbsp;//&nbsp;Callback&nbsp;function&nbsp;gets&nbsp;called&nbsp;after&nbsp;all&nbsp;images&nbsp;are&nbsp;preloaded$.fn.preloadImages&nbsp;=&nbsp;function(callback)&nbsp;{ &nbsp;&nbsp;checklist&nbsp;=&nbsp;this.toArray(); &nbsp;&nbsp;this.each(function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;$('<img>').attr({&nbsp;src:&nbsp;this&nbsp;}).load(function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;checklist.remove($(this).attr('src')); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(checklist.length&nbsp;==&nbsp;0)&nbsp;{&nbsp;callback();&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;});};出于兴趣，在我的上下文中，我使用如下：$.post('/submit_stuff',&nbsp;{&nbsp;id:&nbsp;123&nbsp;},&nbsp;function(response)&nbsp;{ &nbsp;&nbsp;$([response.imgsrc1,&nbsp;response.imgsrc2]).preloadImages(function(){ &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Update&nbsp;page&nbsp;with&nbsp;response&nbsp;data &nbsp;&nbsp;});});希望这有助于从Google访问此页面的人（正如我所做）寻找在Ajax调用上预加载图像的解决方案。