Question

我帮助使用jquery为网站制作的这个背景旋转木马，它的工作效果很好..除了我发现页面最初可能需要一段时间才能加载..我想如果我真的下载了我的图片＃39; m用于后台，而不是通过＆＃39; http://www.whatever.jpg＆＃39;加载它们，页面可能会加载得更快..但我仍然是一个菜鸟..并且避风港＃39;能够弄清楚为什么这不起作用..这是我的代码：

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

如果您想要更改的唯一内容是src的{{1}}属性是本地文件夹，那么我假设对其他工作代码的唯一更改是您{中的字符串{1}}数组指向本地文件。

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

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

2 个答案: