Anyone? Have i not given enough information? Wrong category? I am a beginner with JS... any help or direction would be helpful as the site is taking nearly 2 minutes to load and no one is going to wait around that long.
I tried your site, and it basically hung Firefox/Firebug, so it was hard to tell what's going on. But loading 200 images - yikes! Are these all images that need to be displayed on your home page? I'd make darn sure they are thumbnail images, and even at that 200 of them is a fair load.
I'm sure there's a method you could use to just select out some of them to load, but I'm not really a JS person so hopefully someone can help. You might post the JS code you're using to do the pre-loading.
Me, I don't pre-load images at all on my photography site.
Yeah it is pretty much a terrible idea to load all of these images at once, they seem to be all jpegs at around 250kb each. Load the images as they are needed and be sure that cache control is set.
It's easy enough to do this in standard JavaScript. Not sure about jQuery.
In standard JS, you could easily specify just the main images to preload and then, when the page is fully loaded, call JS to start pre-loading the rest of them.
But I don't even see a list of images in that JS code that was posted, so not sure where jQuery is extracting their URLs from in order to do the preload.
__________________
An optimist sees the glass as half full.
A pessimist sees the glass as half empty.
A realist drinks it no matter how much there is.
Is it possible to use the lazy load plugin for jquery im not too sure how to integrate it. Basically i think it works by loading what ever is on screen so if you scroll down then the images load.
But see, that is *NOT* happening until *AFTER* the page is loaded. So that's not "preloading" at all. That's just loading images in order to use them in the animation.
Code:
* LOAD UP ALL THEM IMAGES FIRST... *
$(window).load(function() { /* this says "do this when the page is fully loaded" */
lets****ingParty(); /* so this isn't called until after the page loads */
slipNslide();
});
function lets****ingParty(){
// SLIDE EM ON IN!
$('#loadCon').stop().animate({top:'200%'}, 1349, 'easeInOutExpo');
/* and so this is just making sure the images are there before the animate starts */
$('#leftSide, #rightSide, #graveCon, #slideCon').stop().animate({top:'0%'}, 1349, 'easeInOutExpo');
There's no reason you couldn't add *SEPARATE* code to preload *JUST* the needed background images before page load.
But that code *CAN NOT* be triggered by window.onload. It has to just start running as soon as the JS code is encountered during the file processing of the HTML. In other words, it shouldn't be hooked to any even of any kind.
__________________
An optimist sees the glass as half full.
A pessimist sees the glass as half empty.
A realist drinks it no matter how much there is.
Yeah it is pretty much a terrible idea to load all of these images at once, they seem to be all jpegs at around 250kb each. Load the images as they are needed and be sure that cache control is set.
I have no idea what cache control is?
Quote:
Originally Posted by Old Pedant
It's easy enough to do this in standard JavaScript. Not sure about jQuery.
In standard JS, you could easily specify just the main images to preload and then, when the page is fully loaded, call JS to start pre-loading the rest of them.
But I don't even see a list of images in that JS code that was posted, so not sure where jQuery is extracting their URLs from in order to do the preload.
Can you give me an example on how normal JS code would do a list? Might have a go at integrating it somehow...
But see, that is *NOT* happening until *AFTER* the page is loaded. So that's not "preloading" at all. That's just loading images in order to use them in the animation.
Code:
* LOAD UP ALL THEM IMAGES FIRST... *
$(window).load(function() { /* this says "do this when the page is fully loaded" */
lets****ingParty(); /* so this isn't called until after the page loads */
slipNslide();
});
function lets****ingParty(){
// SLIDE EM ON IN!
$('#loadCon').stop().animate({top:'200%'}, 1349, 'easeInOutExpo');
/* and so this is just making sure the images are there before the animate starts */
$('#leftSide, #rightSide, #graveCon, #slideCon').stop().animate({top:'0%'}, 1349, 'easeInOutExpo');
There's no reason you couldn't add *SEPARATE* code to preload *JUST* the needed background images before page load.
But that code *CAN NOT* be triggered by window.onload. It has to just start running as soon as the JS code is encountered during the file processing of the HTML. In other words, it shouldn't be hooked to any even of any kind.
I think it makes more sense adding separate code for the important background images and let everything else load whilst the user is browsing.
I have given my images div ids and nav ids any chance i can use them to order what i want to load in a JS file by just listing them in order? Is this to do with DOM?
<script type="text/javascript">
/* any number of image urls...relative or absolute...with a comma after each except last */
var preloads = [
"images/abc.jpg",
"images/def.jpg",
"thumbs/foo.png",
"http://www.anothersite.com/image/stealthis.jpg"
];
for ( var p = 0; p < preloads.length; ++p )
{
var image = new Image();
image.src = preloads[p];
preloads[p] = image; // replace just name with image object
}
...
Now, that *starts* the image loading process as soon as that <script> tag is enountered, presumably within the first few lines of the HTML.
If all those URLs are *also* referred to in <img> tags in the rest of the HTML, then the browser still won't start the window.onload stuff until such images are fully downloaded.
So you need to pick and choose.
But you *can* have images in that array that are not also in <img> tags, and then they are indeed preloaded and will hopefully be ready for use when needed.
__________________
An optimist sees the glass as half full.
A pessimist sees the glass as half empty.
A realist drinks it no matter how much there is.
I have given my images div ids and nav ids any chance i can use them to order what i want to load in a JS file by just listing them in order?
See, the problem is that JS can't "see" ids until after the HTML element with that id is fully rendered by the HTML engine. Typically, this means that JS can't see (example) <div id="xyz"> until after the [b]</div>[/b that terminates the div is encountered.
So that's why techniques that scan the DOM looking for images can't (in general) be used until the page is fully loaded. It's why you have to give a separate static list to JS to get started with, because the tags are perhaps milliseconds away from being accessible.
__________________
An optimist sees the glass as half full.
A pessimist sees the glass as half empty.
A realist drinks it no matter how much there is.
Before you post, read our: 
Loading Certain Images before website loads?
and no one is going to wait around that long.
