PicnicTutorials Posted June 12, 2009 Report Share Posted June 12, 2009 (edited) Morning, Currently I have 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(); }); Edited June 12, 2009 by Eric Quote Link to comment Share on other sites More sharing options...
BeeDev Posted June 12, 2009 Report Share Posted June 12, 2009 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 Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted June 12, 2009 Author Report Share Posted June 12, 2009 (edited) 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... <br />gallery = function() {<br />var current = 1;<br />var total = $('#photos li').length;<br />$('#photos li').hide();<br />$('#pic1').fadeIn('slow');<br />$('#number').html('1 of ' + total );<br />setHeight(1)<br /><br />$('#first').click(function(){<br />var prev = 1;<br />if (current != 1) {<br />$('#pic' + current).fadeOut('slow');<br />setHeight(prev)<br />$('#pic' + prev).fadeIn('slow');<br />current = 1;<br />$('#number').html(current + ' of ' + total)<br />}<br />return false;<br />});<br /><br />$('#previous').click(function(){<br />var prev = current - 1;<br />if (prev < 1) prev = 1;<br />if (current != 1) {<br />$('#pic' + current).fadeOut('slow');<br />$('#pic' + prev).fadeIn('slow');<br />current = prev;<br />setHeight(current)<br />$('#number').html(current + ' of ' + total)<br />}<br />return false;<br />});<br /><br />$('#next').click(function(){<br />var next = current + 1;<br />if (next > total) next = total;<br />if (current != total) {<br />$('#pic' + current).fadeOut('slow');<br />$('#pic' + next).fadeIn('slow');<br />current = next;<br />setHeight(current)<br />$('#number').html(current + ' of ' + total)<br />}<br />return false;<br />});<br /><br />$('#last').click(function(){<br />var next = total;<br />if (current != total) {<br />$('#pic' + current).fadeOut('slow');<br />$('#pic' + next).fadeIn('slow');<br />current = total;<br />setHeight(current)<br />$('#number').html(current + ' of ' + total)<br />}<br />return false;<br />});<br /><br />function setHeight(current) {}}<br /> Edited June 12, 2009 by Eric Quote Link to comment Share on other sites More sharing options...
BeeDev Posted June 15, 2009 Report Share Posted June 15, 2009 (edited) 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 Just have to wrap it up in the $(document).ready now Edited June 15, 2009 by BeeDev Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.