• Eric
  • Advanced Member
  • Offline
  • From: Carlsbad, CA
  • Registered: December 19, 2008
  • Posts: 2,179
  • Reputation: 1

Topic: Best Replacement for <body onload="gallery()">

Morning,

Currently I have <body onload="gallery()"> firing the script. It's for a photo gallery which will have 60 plus fairly large photos. The script is running along side jQuery. I am looking for the fastest onload event. Because I don't want to wait until all 60 photos are loaded before it fires.

So far I've pieced together these three alternatives. Which is "best/fastest", or can you suggest a even better/faster way? Thanks! 

window.onload=gallery;
 
window.onload = function(){
gallery();   
} 
 
$(document).ready(function(){
gallery();   
});

Last edited by Eric (June 12, 2009 9:49 am)

www.visibilityinherit.com/tools.php

Vote up Vote down

  • Registered: April 30, 2009
  • Posts: 156
  • Reputation: 2

Re: Best Replacement for <body onload="gallery()">

You may know this already, but

window.onload only fires after the page finishes rendering. So it will start your gallery() function after the page finishes loading.

However $(document).ready fires the functions inside right after the DOM is ready to be manipulated, this means the images & the page don't need to be fully rendered on the user's browser.

But, if your gallery() function uses the image dimensions or various other properties to perform some tasks, then they will most likely fail, as the images have -1x-1 dimensions before they're loaded, .... i think.

So, if the above is true, then maybe Preload all the images on (document).ready() and then fire the gallery() function big_smile

Vote up Vote down

  • Eric
  • Advanced Member
  • Offline
  • From: Carlsbad, CA
  • Registered: December 19, 2008
  • Posts: 2,179
  • Reputation: 1

Re: Best Replacement for <body onload="gallery()">

Thanks for your input! Here is the JS I'm working with. I have to test first, but I "think" I don't have to worry about the preload anyway (well see). Because the images are in the html so their being loaded as fast as they can anyways - RIGHT??? In which case I just have to pick a replacement for the onLoad I think. Suggestions/directions welcome... 

<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
gallery = function() {
var current = 1;
var total = $('#photos li').length;
$('#photos li').hide();
$('#pic1').fadeIn('slow');
$('#number').html('1 of ' + total );
setHeight(1)

$('#first').click(function(){
var prev  = 1;
if (current != 1) {
$('#pic' + current).fadeOut('slow');
setHeight(prev)
$('#pic' + prev).fadeIn('slow');
current = 1;
$('#number').html(current + ' of ' + total)
}
return false;
});

$('#previous').click(function(){
var prev  = current - 1;
if (prev < 1) prev = 1;
if (current != 1) {
$('#pic' + current).fadeOut('slow');
$('#pic' + prev).fadeIn('slow');
current = prev;
setHeight(current)
$('#number').html(current + ' of ' + total)
}
return false;
});

$('#next').click(function(){
var next = current + 1;
if (next > total) next = total;
if (current != total) {
$('#pic' + current).fadeOut('slow');
$('#pic' + next).fadeIn('slow');
current = next;
setHeight(current)
$('#number').html(current + ' of ' + total)
}
return false;
});

$('#last').click(function(){
var next  = total;
if (current != total) {
$('#pic' + current).fadeOut('slow');
$('#pic' + next).fadeIn('slow');
current = total;
setHeight(current)
$('#number').html(current + ' of ' + total)
}
return false;
});

function setHeight(current) {}}
</script>
</head>
<body onload="gallery()">

Last edited by Eric (June 12, 2009 1:10 pm)

www.visibilityinherit.com/tools.php

Vote up Vote down

  • Registered: April 30, 2009
  • Posts: 156
  • Reputation: 2

Re: Best Replacement for <body onload="gallery()">

Because the images are in the html so their being loaded as fast as they can anyways - RIGHT???

Right, sorry for misleading you, but I have to correct myself. Preloads won't do much unless you have some hidden images on your page, like Rollover state images, hidden gallery images etc. I think Preloads are used to store those hidden images in your cache, so that the browser won't have to send a request each time you reveal those hidden images.

Your gallery code looks ok to me wink Just have to wrap it up in the $(document).ready now

Last edited by BeeDev (June 15, 2009 3:54 am)

Vote up Vote down