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.
