[jQuery] how to wait for image finished loading then display the page?
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.