...

View Full Version : Loading Certain Images before website loads?



CSSkix
10-03-2011, 03:04 PM
Hi Currently my website waits till all images are loaded up first:




$(document).ready(function(){

* LOAD UP ALL THEM IMAGES FIRST... *

$(window).load(function() {
letsLoad();
fadingEffects();
});



However my website now has over 200 images on the website and now its taking way too long to load the images.

My question's are:

1. Is it possible to either load the site when its around 20% or even 50% loaded?

OR

2. If its possible to give certain images a tag?? and when these images are loaded then the site loads? :confused:

Heres a link to the site - must warn you need broadband and a high speed connection takes way to long to load. Takes me around 1minute 30seconds

http://www.arcvizio.co.uk/ovoma/2/index.html


Thanks

CSSkix
10-03-2011, 06:25 PM
Hi Currently my website waits till all images are loaded up first:




$(document).ready(function(){

* LOAD UP ALL THEM IMAGES FIRST... *

$(window).load(function() {
letsLoad();
fadingEffects();
});



However my website now has over 200 images on the website and now its taking way too long to load the images.

My question's are:

1. Is it possible to either load the site when its around 20% or even 50% loaded?

OR

2. If its possible to give certain images a tag?? and when these images are loaded then the site loads? :confused:

Heres a link to the site - must warn you need broadband and a high speed connection takes way to long to load. Takes me around 1minute 30seconds

http://www.arcvizio.co.uk/ovoma/2/index.html


Thanks

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 :eek: and no one is going to wait around that long.

tracknut
10-03-2011, 06:58 PM
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.

Dave

CSSkix
10-03-2011, 09:33 PM
Hi thanks for the reply its not 200 its around 60 images but the thing is the images fill the background as its a portfolio site.

I would be happy if just the main images load first then the others while the user browses.

Ive attached the JS code:-





// ALRIGHT
$(document).ready(function(){

* LOAD UP ALL THEM IMAGES FIRST... *

$(window).load(function() {
lets****ingParty();
slipNslide();

});

function lets****ingParty(){


// SLIDE EM ON IN!
$('#loadCon').stop().animate({top:'200%'}, 1349, 'easeInOutExpo');
$('#leftSide, #rightSide, #graveCon, #slideCon').stop().animate({top:'0%'}, 1349, 'easeInOutExpo');

// SHOW 'N' HIDE THE MENU
$('#menu').toggle(function(){
$('#vertCon').stop().animate({width:'215px'}, 666, 'easeInOutExpo');
$('#rightSide').stop().animate({left:'295px'}, 666, 'easeInOutExpo');
$('#closeBox, #closeGrave').css({'left':'295px'});
$('.infoArea, #graveArea').css({'left':'375px'});
}, function(){
$('#vertCon').stop().animate({width:'0px'}, 666, 'easeInOutExpo');
$('#rightSide').stop().animate({left:'79px'}, 666, 'easeInOutExpo');
$('#closeBox, #closeGrave').css({'left':'79px'});
$('.infoArea, #graveArea').css({'left':'159px'});
});


// PROJECTS INFO BOX

$('#plus').click(function(){
$('#infoBox, #closeBox').stop().animate({top:'0%'}, 1349, 'easeInOutExpo');
$('#leftSide').stop().animate({top:'-200%'}, 1349, 'easeInOutExpo');
$('#rightSide').stop().animate({top:'200%'}, 1349, 'easeInOutExpo');
$('#bground').stop().fadeTo(1349, '0.94', 'easeInOutExpo');
});
$('#xxx').click(function(){
$('#infoBox, #closeBox').stop().animate({top:'-200%'}, 1349, 'easeInOutExpo');
$('#leftSide, #rightSide').stop().animate({top:'0%'}, 1349, 'easeInOutExpo');
$('#bground').stop().fadeTo(1349, '0', 'easeInOutExpo', function(){ $(this).hide(); });
});


// GRAVE INFO BOX
$('#logoWrap').click(function(){
$('#graveBox, #closeGrave').stop().animate({top:'0%'}, 1349, 'easeInOutExpo');
$('#leftSide').stop().animate({top:'-200%'}, 1349, 'easeInOutExpo');
$('#rightSide').stop().animate({top:'200%'}, 1349, 'easeInOutExpo');
$('#bground').stop().fadeTo(1349, '0.94', 'easeInOutExpo');
});
$('#xxxGrave').click(function(){
$('#graveBox, #closeGrave').stop().animate({top:'-200%'}, 1349, 'easeInOutExpo');
$('#leftSide, #rightSide').stop().animate({top:'0%'}, 1349, 'easeInOutExpo');
$('#bground').stop().fadeTo(1349, '0', 'easeInOutExpo', function(){ $(this).hide(); });
});

/*LARGE SCREEN BACKGROUND FULLSCREEN*/

var fsImg = $('.slideImg');
var startwidth= 64;
var startheight= 39;
var ratio = startheight/startwidth;
var imagewidth = $(this).width();
var imageheight = $(this).height();
var browserwidth = $(window).width();
var browserheight = $(window).height();

function fillerup(){

if ((browserheight/browserwidth) > ratio){
fsImg.height(browserheight);
fsImg.width(browserheight / ratio);
} else {
fsImg.width(browserwidth);
fsImg.height(browserwidth * ratio);
};

// CENTER IMGS VERTICALLY + HORIZONTALLY
fsImg.css('left', (browserwidth - fsImg.width())/2);
fsImg.css('top', (browserheight - fsImg.height())/2);

// SMALL-*** SCREEN ALERT
if ((browserheight <= 480) || (browserwidth <= 860)) {
$('#smallScreenCon').stop().animate({top:'0%'}, 666, 'easeInOutExpo');
} else {
$('#smallScreenCon').stop().animate({top:'-100%'}, 666, 'easeInOutExpo');
};

};

$(window).resize(function(){
imagewidth = $(this).width();
imageheight = $(this).height();
browserwidth = $(window).width();
browserheight = $(window).height();
fillerup();
$('#thumbCon').stop().animate({top:'0px'}, 1349, 'easeInOutExpo');



});

fillerup();

// ROLL 'EM UP

$('.hovUp').hover(function(){
var thisBlock = $(this);
var thisRoll = thisBlock.children('.aBlock');
thisRoll.stop().animate({top:'-39px'}, 200);
}, function(){
var thisBlock = $(this);
var thisRoll = thisBlock.children('.aBlock');
thisRoll.stop().animate({top:'0px'}, 200);
});


// ROLL 'EM DOWN
$('.hovDown').hover(function(){
var thisBlock = $(this);
var thisRoll = thisBlock.children('.aBlock');
thisRoll.stop().animate({top:'0px'}, 200);
}, function(){
var thisBlock = $(this);
var thisRoll = thisBlock.children('.aBlock');
thisRoll.stop().animate({top:'-39px'}, 200);
});


// ROLL 'EM LEFT
$('.hovLeft').hover(function(){
var thisBlock = $(this);
var thisRoll = thisBlock.children('.aBlock');
thisRoll.stop().animate({left:'-39px'}, 200);
}, function(){
var thisBlock = $(this);
var thisRoll = thisBlock.children('.aBlock');
thisRoll.stop().animate({left:'0px'}, 200);
});


// ROLL 'EM RIGHT
$('.hovRight').hover(function(){
var thisBlock = $(this);
var thisRoll = thisBlock.children('.aBlock');
thisRoll.stop().animate({left:'0px'}, 200);
}, function(){
var thisBlock = $(this);
var thisRoll = thisBlock.children('.aBlock');
thisRoll.stop().animate({left:'-39px'}, 200);
});


// LOGO ROLL
$('#logoWrap').hover(function(){
$('#graveicon').stop().animate({top:'-39px'}, 200);
$('#grave').stop().animate({top:'0px'}, 200);
}, function(){
$('#graveicon').stop().animate({top:'0px'}, 200);
$('#grave').stop().animate({top:'-39px'}, 200);
});

};

/*here we have the effects and controls*/


function slipNslide(){

// HI. WE ARE GLOBAL VARS. CARRY ON...
var inmotion;
var prevIndex;


// CLICKS FOR NEXT/PREV PROJECTS
$('.navBlock.down').click(nextProj);
$('.navBlock.up').click(prevProj);

// CLICKS FOR NEXT/PREV SLIDES PER PROJECT
$('.navBlock.right').click(nextSlider);
$('.navBlock.left').click(prevSlider);

// KEYBOARD CONTROLS
$(document).keydown(function(e){

var keyCode = e.keyCode || e.which,
arrow = {sleft:37, sright:39, sup:38, sdown:40};

switch (keyCode) {
case arrow.sleft:
prevSlider();
if(inmotion) return false;
break;
case arrow.sright:
nextSlider();
if(inmotion) return false;
break;
case arrow.sup:
prevProj();
if(inmotion) return false;
break;
case arrow.sdown:
nextProj();
if(inmotion) return false;
break;
};

});




// SET INITIAL PROJECT TO BE ACTIVE
if ($('#slideCon .activeProj').length == 0) $('#slideCon > div:first').addClass('activeProj currentProj');
if ($('#thumbCon .curThumb').length == 0) $('#thumbCon > li a:first').addClass('curThumb');
$('#infoBox > section:first').show();


// NEXT PROJECT
function nextProj() {

if(inmotion) return false;
else inmotion = true;

var activeproj = $('.activeProj');
activeproj.removeClass('currentProj');
activeproj.stop().animate({'top':'-100%'}, 1349, 'easeInOutExpo', function(){
activeproj.removeClass('activeProj');
$('.prevProj').children('.eachSlideCon').removeClass('activeSlide prevSlide nextSlide');
prevproj.children('.eachSlideCon').not('.activeSlide').css({'left':'100%'});
reSetter();
inmotion = false;
});

if (activeproj.length == 0) activeproj = $('#slideCon > div:last');

var nextproj = activeproj.next().length ? activeproj.next() : $('#slideCon > div:first');
var prevproj = nextproj.prev().length ? nextproj.prev() : $('#slideCon > div:last');

$('.prevProj').removeClass('prevProj');
prevproj.addClass('prevProj');

nextproj.css({'top':'100%'}).addClass('currentProj');
nextproj.stop().animate({'top':'0%'}, 1000, 'easeInOutExpo', function(){
nextproj.addClass('activeProj');
});

// SYNC UP THUMBS ON VERTICAL MENU
var curLink = nextproj.attr('id');
var thisNewLink = $('a[data-target="'+curLink+'"]');
var thumb = $('.thumbImg');
var thumbImg = $('.thumbImg img');

thumbImg.stop().animate({opacity:1}, 200);
thumb.removeClass('curThumb');
thisNewLink.addClass('curThumb');
$('.curThumb img').stop().animate({opacity:0.20}, 0);
thumbOvers();

setIndex();

// SYNC UP THE BLAH BLAH BLAH...
var blah = $('.theBlah');
var thisNewBlah = $('.'+curLink);

blah.fadeOut(666, 'easeInOutExpo');
thisNewBlah.delay(400).fadeIn(666, 'easeInOutExpo');

reSetter();

};

// PREV PROJECT
function prevProj() {

if(inmotion) return false;
else inmotion = true;

var activeproj = $('.activeProj');
activeproj.removeClass('currentProj');
activeproj.stop().animate({'top':'100%'}, 1349, 'easeInOutExpo', function(){
activeproj.removeClass('activeProj');
$('.prevProj').children('.eachSlideCon').removeClass('activeSlide prevSlide nextSlide');
prevproj.children('.eachSlideCon').not('.activeSlide').css({'left':'100%'});
reSetter();
inmotion = false;
});

if (activeproj.length == 0) activeproj = $('#slideCon > div:first');

var nextproj = activeproj.prev().length ? activeproj.prev() : $('#slideCon > div:last');
var prevproj = nextproj.next().length ? nextproj.next() : $('#slideCon > div:first');

$('.prevProj').removeClass('prevProj');
prevproj.addClass('prevProj');

nextproj.css({'top':'-100%'}).addClass('currentProj');
nextproj.stop().animate({'top':'0%'}, 1000, 'easeInOutExpo', function(){
nextproj.addClass('activeProj');
});

// SYNC UP THUMBS ON VERTICAL MENU
var curLink = nextproj.attr('id');
var thisNewLink = $('a[data-target="'+curLink+'"]');
var thumb = $('.thumbImg');
var thumbImg = $('.thumbImg img');

thumbImg.stop().animate({opacity:1}, 200);
thumb.removeClass('curThumb');
thisNewLink.addClass('curThumb');
$('.curThumb img').stop().animate({opacity:0.20}, 0);
thumbOvers();

setIndex();

// SYNC UP THE BLAH BLAH BLAH...
var blah = $('.theBlah');
var thisNewBlah = $('.'+curLink);

blah.fadeOut(666, 'easeInOutExpo');
thisNewBlah.delay(400).fadeIn(666, 'easeInOutExpo');

reSetter();

};


// NEXT SLIDE
function nextSlider() {

if(inmotion) return false;
else inmotion = true;

var currentslide = $('.activeSlide');
currentslide.stop().animate({'left':'-100%'}, 1349, 'easeInOutExpo', function(){
currentslide.removeClass('activeSlide');
inmotion = false;
});

if (currentslide.length == 0) currentslide = $('.currentProj > div:last');

var nextslide = currentslide.next().length ? currentslide.next() : $('.currentProj > div:first');
var prevslide = nextslide.prev().length ? nextslide.prev() : $('.currentProj > div:last');

var slidecount = $('.control_count .cur_count').html();
currentslide.next().length ? slidecount++ : slidecount = 1;
if(slidecount < 10){
$('.control_count .cur_count').html('0'+slidecount);
} else if(slidecount >= 10){
$('.control_count .cur_count').html(slidecount);
};

$('.prevSlide').removeClass('prevSlide');
prevslide.addClass('prevSlide');

nextslide.css({'left':'100%'});
nextslide.stop().animate({'left':'0%'}, 1000, 'easeInOutExpo', function(){
nextslide.addClass('activeSlide');
});

};

// PREV SLIDE
function prevSlider() {

if(inmotion) return false;
else inmotion = true;

var currentslide = $('.activeSlide');

currentslide.stop().animate({'left':'100%'}, 1349, 'easeInOutExpo', function(){
currentslide.removeClass('activeSlide');
inmotion = false;
});

if (currentslide.length == 0) currentslide = $('.currentProj > div:first');

var nextslide = currentslide.prev().length ? currentslide.prev() : $('.currentProj > div:last');
var prevslide = nextslide.next().length ? nextslide.next() : $('.currentProj > div:first');

var slidecount = $('.control_count .cur_count').html();
currentslide.prev().length ? slidecount-- : slidecount = $('.currentProj > *').size();
if(slidecount < 10){
$('.control_count .cur_count').html('0'+slidecount);
} else if(slidecount >= 10){
$('.control_count .cur_count').html(slidecount);
};

$('.prevSlide').removeClass('prevSlide');
prevslide.addClass('prevSlide');

nextslide.css({'left':'-100%'});
nextslide.stop().animate({'left':'0%'}, 1000, 'easeInOutExpo', function(){
nextslide.addClass('activeSlide');
});

};

/*RESET*/

function reSetter(){

// USE ACTIVE PROJECT TO DETERMINE ACTIVE SLIDE
if ($('.currentProj .activeSlide').length == 0) $('.currentProj > div:first').addClass('activeSlide');

$('.activeSlide').css({'left':'0%'});

var slidecount = $('.control_count .cur_count').html();
var slidetotal = $('.control_count .tot_count').html();
if(slidecount < 10){
$('.control_count .cur_count').html('0'+1);
} else if(slidecount >= 10){
$('.control_count .cur_count').html(1);
};
if($('.currentProj > *').size() < 10){
$('.control_count .tot_count').html('0'+($('.currentProj > *').size()));
} else if($('.currentProj > *').size() >= 10){
$('.control_count .tot_count').html($('.currentProj > *').size());
};

};

reSetter();



$('.curThumb img').stop().animate({opacity:0.20}, 0);

// THUMB HOVERS
function thumbOvers(){

$('.thumbImg').hover(function(){
var thisThumb = $(this);
var thisImg = thisThumb.children('img');

if(!(thisThumb.hasClass('curThumb')) ){
thisImg.stop().animate({opacity:0.20}, 200);
};
}, function(){
var thisThumb = $(this);
var thisImg = thisThumb.children('img');

if(!(thisThumb.hasClass('curThumb')) ){
thisImg.stop().animate({opacity:1}, 200);
};
});

};

thumbOvers();

// THUMB CLICKERS
$('.thumbImg').click(function(){

if(inmotion) return false;
else inmotion = true;

var thisThumb = $(this);
var thumb = $('.thumbImg');
var thumbImg = $('.thumbImg img');
var curLink = thisThumb.attr('data-target');


var eachProj = $('.eachProj');
var activeproj = $('.activeProj');
var nextProj = $('#'+curLink);

var totProj = $('#thumbCon .thumbImg');
var projCount = totProj.length;
var curIndex = thisThumb.data('index');
var nextIndex = curIndex + 1;
if (nextIndex === projCount) { nextIndex = 0; }
var nextStep = $(totProj[nextIndex]);

var blah = $('.theBlah');
var thisNewBlah = $('.'+curLink);


thumbImg.stop().animate({opacity:1}, 200);
thumb.removeClass('curThumb');
thisThumb.addClass('curThumb');
$('.curThumb img').stop().animate({opacity:0.20}, 0);
thumbOvers();

// SET THIS PREVINDEX
prevIndex = prevIndex || 0;

// IF ITEM CLICKED IS ABOVE CURRENT ITEM IN THE LIST, SLIDE NEXT PROJECT IN FROM BOTTOM
if (prevIndex < curIndex) {
eachProj.removeClass('currentProj prevProj');
activeproj.stop().animate({'top':'-100%'}, 1349, 'easeInOutExpo', function(){
activeproj.removeClass('activeProj');
eachProj.children('.eachSlideCon').removeClass('activeSlide prevSlide nextSlide');
eachProj.children('.eachSlideCon').not('.activeSlide').css({'left':'100%'});
reSetter();
inmotion = false;
});

nextProj.css({'top':'100%'}).addClass('currentProj');
$('.currentProj').stop().animate({'top':'0%'}, 1000, 'easeInOutExpo', function(){
$(this).addClass('activeProj');
});

blah.fadeOut(666, 'easeInOutExpo');
thisNewBlah.delay(400).fadeIn(666, 'easeInOutExpo');

reSetter();

} else if (prevIndex > curIndex){
eachProj.removeClass('currentProj prevProj');
activeproj.stop().animate({'top':'100%'}, 1349, 'easeInOutExpo', function(){
activeproj.removeClass('activeProj');
eachProj.children('.eachSlideCon').removeClass('activeSlide prevSlide nextSlide');
eachProj.children('.eachSlideCon').not('.activeSlide').css({'left':'100%'});
reSetter();
inmotion = false;
});

nextProj.css({'top':'-100%'}).addClass('currentProj');
$('.currentProj').stop().animate({'top':'0%'}, 1000, 'easeInOutExpo', function(){
$(this).addClass('activeProj');
});

blah.fadeOut(666, 'easeInOutExpo');
thisNewBlah.delay(400).fadeIn(666, 'easeInOutExpo');

reSetter();

} else { inmotion = false; };

// COMPARE THESE TO INTIAL GLOBAL VAR
//prevIndex = curIndex;
setIndex();

});

function setIndex(){
var curIndex = $('.curThumb').data('index');
prevIndex = curIndex;
};



$('#sliderBox').mousemove(function(e){

if($(this).height() < $('#thumbCon').height()) {
var distance = e.pageY - $(this).offset().top;
var percentage = distance / $(this).height();
var targetY = -Math.round(($('#thumbCon').height() - $(this).height()) * percentage);

if(e.pageY < 157){
$('#thumbCon').stop().animate({top:'0px'}, 2000, 'easeOutCirc');
} else {
$('#thumbCon').stop().animate({top:targetY+'px'}, 2000, 'easeOutCirc');
};
};

});

};

});



and in the HTML code to execute the loader:-



<!-- LOADING BLOCK -->
<div id="loadCon">
<span class="navBlock loading"><img src="data/images/ajax-loader.gif" alt="" /></span>
</div>


any way to get it to load certain images?

coiner
10-03-2011, 09:38 PM
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.

Old Pedant
10-03-2011, 09:45 PM
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.

CSSkix
10-03-2011, 09:52 PM
hi i think it is extracting it from here:-



// SLIDE EM ON IN!
$('#loadCon').stop().animate({top:'200%'}, 1349, 'easeInOutExpo');
$('#leftSide, #rightSide, #graveCon, #slideCon').stop().animate({top:'0%'}, 1349, 'easeInOutExpo');


the #slidecon is linked to the html div id where the project images are loaded in the html




<div id="slideCon">

<!-- PROJECT 1 Ali Sharaf-->
<div class="eachProj" id="proj1">
<div class="eachSlideCon"><img class="slideImg" src="data/ovomaimages/nsi/Ali Sharaf.PNG" alt="" /></div>
<div class="eachSlideCon"><img class="slideImg" src="data/ovomaimages/MIKLOS/Ali Sharaf/image1.jpg" alt="" /></div>
<div class="eachSlideCon"><img class="slideImg" src="data/ovomaimages/MIKLOS/Ali Sharaf/image2.jpg" alt="" /></div>
</div>


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.

http://www.appelsiini.net/projects/lazyload

DEMO

http://www.appelsiini.net/projects/lazyload/enabled.html

anyone have experience in using this?

Old Pedant
10-03-2011, 10:13 PM
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.


* 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.

CSSkix
10-03-2011, 10:14 PM
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?



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...

Appreciated :D

CSSkix
10-03-2011, 10:21 PM
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.


* 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?

Old Pedant
10-03-2011, 10:22 PM
<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.

Old Pedant
10-03-2011, 10:25 PM
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.

CSSkix
10-03-2011, 10:57 PM
Thanks for that i'll try and change it - hopefully improve load times and efficiency of code.

thanks again



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum