0

I had help with this background carousel made with jquery for a website and it works just great.. except that i find that the page can take a while to load initially.. i thought that if i actually downloaded the pictures that i'm using for the background instead of loading them via 'http://www.whatever.jpg', that the page might load faster.. but i'm kind of a noob still.. and haven't been able to figure out why this isn't working.. Here is my code:

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();
});
}());

i've searched around for a while now... thanks for the help!

SuperVeetz
  • 2,128
  • 3
  • 24
  • 37
  • 2
    There is no such thing as a "jquery variable". The language is JavaScript, jQuery is just a library, so it is correct to say a JavaScript variable. – php_nub_qq Oct 23 '14 at 16:29
  • i guess it would also make a huge difference on the fact that i'm not hosting the website and so that could cause it to load slowly but i'm not even able to get the picture to load at all inless i use a URL.. but like lochermage said, it probably won't make a difference anyways.. – SuperVeetz Oct 23 '14 at 17:17

2 Answers2

1

You do yourself no favors trying to pre-load the images right before they are loaded for display in your CSS. In either case, the images have to be loaded first before you can see them, so there is going to be a delay regardless.

Lochemage
  • 3,974
  • 11
  • 11
  • hmm okay.. so i guess it would need to be coded differently in-order to avoid the slow loading of the page on initial load.. – SuperVeetz Oct 23 '14 at 16:45
  • Images are loaded on their own thread in the background, it shouldn't block your page load. You should see the page load up immediately with a white background until the image appears. If this is not the case, there is something else blocking your load. – Lochemage Oct 23 '14 at 16:47
0

If the only thing that you want to change is the src attribute of the imgs to be a local folder, then I assume the only change to otherwise working code is the strings in your images array point to local files.

If that's the case, and if you want to resolve the location correctly without adding some sort of directory changes (../, img/ or the like), then you will need those images to be in the same directory as the html file, not the file.js file.

Luke
  • 145
  • 1
  • 10
  • @Alex Di Vito, is the code you posted actually working, only slowly? There are a number of questionable things that suggest it's not. 1, the preloading `for` loop doesn't register the `tImg` variable anywhere, and doesn't appear to be used elsewhere. 2, the `loopBg` function calls itself without good recursive style. It does so infinitely. Either of those could be your real problem. – Luke Oct 23 '14 at 16:59
  • lol, yah it does work! i swear.. i use the same background on another website.. the code was taught to me here.. http://stackoverflow.com/questions/25799055/how-to-make-the-background-a-carousel/25800332#25800332 in his example, he even loads his images locally.. maybe i should try and get in-touch with roko – SuperVeetz Oct 23 '14 at 17:04