javascript - 如何在本地 JavaScript 变量中加载图像

Question

我得到了用 jquery 为网站制作的背景轮播的帮助，它工作得很好..除了我发现该页面最初可能需要一段时间才能加载..我想如果我真的下载了我的图片'用于背景而不是通过'http://www.whatever.jpg加载它们'，页面可能加载得更快..但我还是个菜鸟..并且无法弄清楚为什么这不起作用..这是我的代码:

var images = [
//even though I downloaded the picture and its in the same folder as this file.js, the background just loads a black page, then the other 2 load fine.
"bg1-orig.jpg",
"http://www.desktopaper.com/wp-content/uploads/Cool-Hd-Wallpapers-2.jpg",
"http://wallpaperscraft.com/image/restaurant_table_interior_modern_style_39288_1920x1080.jpg"
];

var $body = $("body"),
$bg = $("#bg"),
n = images.length,
c = 0; // Loop Counter
num = 200;

// Preload Array of images...
for(var i=0; i<n; i++){
var tImg = new Image();
tImg.src = images[i];
}

$body.css({backgroundImage : "url("+images[c]+")"});

(function loopBg(){
  $bg.hide().css({backgroundImage : "url("+images[++c%n]+")"}).delay(7000).fadeTo(2200, 1,      function(){
$body.css({backgroundImage : "url("+images[c%n]+")"}); 
loopBg();
});
}());

我已经搜索了一段时间...感谢您的帮助!

Answer 1

在加载图像以在 CSS 中显示之前尝试预加载图像对您自己没有好处。无论哪种情况，都必须先加载图像才能看到它们，因此无论如何都会有延迟。