如何在本地加载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 中显示之前，尝试预加载图像对您自己不利。无论哪种情况，都必须先加载图像才能看到它们，因此无论如何都会有延迟。

Answer 2

如果您只想更改 imgs 的 src 属性作为本地文件夹，那么我假设对其他工作代码的唯一更改是您的 images 数组点中的字符串到本地文件。

如果是这种情况，并且如果您想在不添加某种目录更改（../、img/ 等）的情况下正确解析位置，那么您需要将这些图像放在同一目录中 作为 html 文件，而不是 file.js 文件。