Hi guys,
My website is www.menggaris.com and if you go there 1st time, you will find that it takes sometimes to load as the first page consist of several images of a total of about 260kb in size. My index.html is like follow: ---------------------------------------------------------------------------------------------- <body> <div id="main"> <div id="slide"></div> <div id="skip" style="display:none;margin:50px 0;font-size:36px"> about.php Get me out of here ! </div> </div> </body> ---------------------------------------------------------------------------------------------- and the javascript for this page is like follows: ---------------------------------------------------------------------------------------------- jQuery.preloadImages = function() { for(var i = 0; i<arguments.length; i++) { jQuery(" ").attr("src", arguments[i]); } }; $.preloadImages('images/loading.gif','images/logo.jpg', 'images/tech-buddy.jpg', 'images/microsoft-logo.jpg', 'images/java-logo.gif', 'images/linux-logo.jpg','images/mysql-logo-web-large.jpg','images/oracle-logo-web.jpg','images/dotnet-logo-web-large.jpg','images/php-logo-web-large.jpg','images/mssql.jpg','images/san-logo-web-large.jpg','images/bea-logo.gif'); $(function() { $('#slide').crossSlide({ fade: 1 }, [ { src: 'images/logo.jpg', from: '100% 80% 1x', to: '100% 0% 1.7x', time: 3 }, { src: 'images/tech-buddy.jpg', from: '100% 80% 1.5x', to: '80% 0% 1.1x', time: 3 }, { src: 'images/microsoft-logo.jpg', from: '100% 80% 1x', to: '100% 0% 1.7x', time: 2 }, { src: 'images/java-logo.gif', from: '100% 50%', to: 'bottom right 1.5x', time: 2 }, { src: 'images/linux-logo.jpg', from: 'top left', to: 'bottom right 1.5x', time: 2 }, { src: 'images/mysql-logo-web-large.jpg', from: '100% 80% 1.5x', to: '80% 0% 1.1x', time: 2 }, { src: 'images/oracle-logo-web.jpg', from: 'top left', to: 'bottom right 1.5x', time: 2 }, { src: 'images/dotnet-logo-web-large.jpg', from: '100% 50%', to: '30% 50% 1.5x', time: 2 }, { src: 'images/php-logo-web-large.jpg', from: 'top left', to: '30% 50% 1.5x', time: 2 }, { src: 'images/mssql.jpg', from: '100% 80% 1.5x', to: '80% 0% 1.1x', time: 2 }, { src: 'images/san-logo-web-large.jpg', from: 'top left', to: 'bottom right 1.5x', time: 2 }, { src: 'images/bea-logo.gif', from: 'top right', to: 'bottom right 1.5x', time: 2 } ]); }); $(document).ready(function(){ $('#skip').show('slow'); }); ---------------------------------------------------------------------------------------------- I am trying to use the jquery preloadImages function. I slide show library I am using is by jquery.cross-slide.js. The problem here is that I want to finish loading the images then the word "Get me out of here !" appear. Now the word appear before those images finished loading. Is is possible that I use jquery to check if all the images have done loading then I display the word "Get me out of here !" ? If yes, could someone please show me the code ? Thanks, Mark Thien -- View this message in context: http://www.nabble.com/how-to-wait-for-image-finished-loading-then-display-the-page--tp21866970s27240p21866970.html Sent from the jQuery General Discussion mailing list archive at Nabble.com.