Question

我的网页横幅上有幻灯片。此幻灯片中的图像可能有些大（> 0.5MB）。因此，我想尽可能地预加载图像。为了做到这一点，我写了以下代码：

var bgs = ["image1.png", "image2.png", "image3.png" ];
var bgi = 0;
var bgimg = null;

var isInitLoad = true;
$(document).ready(function () {
  $("#bannerTable").each(function () { $(this).fadeOut(15); });
  $("#bannerTable").fetchImage();
});

$.fn.fetchImage = function () {
  var image = bgs[bgi];
  var imageUrl = "/images/" + image;

  return this.each(function () {
    var $obj = $(this);
    $obj.fadeOut(250, function () {
    $obj.css('background', 'url(' + imageUrl + ')').fadeIn(250);

    bgi = bgi + 1;
    if (bgi >= bgs.length) {
      bgi = 0;
    }

    if (isInitLoad) {
      setInterval(getNextImage, 3000);
      isInitLoad = false;
    }
  });
});
}

function getNextImage() {
  $("bannerTable").fetchImage();
}

不幸的是，我的图片没有预先加载。如何编写我的代码： 1）下载第一张图像后，bannerTable就会淡入 2）继续下载其他图像以便预先缓存

非常感谢你的帮助！

Answer 1

试试这个：Preloading images with jQuery

Answer 2

在fetchImage（）中尝试使用Image对象来预处理图像。

使用Jquery预加载图像

2 个答案: