Webdigity Webmaster Forums - Preloading images or what to avoid this?

Drupaljohn

Fri 14 November 2008, 01:20 pm GMT +0100

Need a helping hand. See this site:
http://gespoliza.com/

The jquery based cycle picture slider. When you load the page, all the images that compose the slider show one below the other before the thing starts cycling. I have tried preloading these images to see if they wouldn't show like this, but doesn't seem to work. Anyone can teach me how to show the images properly, that is in the slider, not before ?

Thanks in advance

Nikolas

Fri 14 November 2008, 01:55 pm GMT +0100

Why don't you just use the code of this site? It seems that this fellow is using standard jquery plugins to make this work.

Drupaljohn

Fri 14 November 2008, 01:58 pm GMT +0100

Quote from: Nikolas on Nov 14, 2008, 01:55:26 pm

Why don't you just use the code of this site? It seems that this fellow is using standard jquery plugins to make this work.

Hi Nikolas, thanks for the reply. This fellow is me, the site is made by me. Yes, using Drupal 5.x with jquery but just don't know how to avoid pictures showing before the actual cycle effect starts.

Nikolas

Fri 14 November 2008, 02:15 pm GMT +0100

lol, now I got it.

$(document).ready(function().... is executing after the DOM is loaded but before the page is loaded try $(document).load(function()....

Drupaljohn

Sat 22 November 2008, 04:17 pm GMT +0100

Thanks, tried that but doesn't seem to do much.
Now have added something like:

'document.write("<style type=text/css>#picslide{display: none;}<\/style>")');

in the front page document, where picslide is the div ID that contains the pictures. Seems to make things better in IE7 and FF2 (not in Opera) but still not what i am looking for. Will just have to tread the web till I find the right method,

jqueryHowto

Sat 18 April 2009, 01:21 pm GMT +0200

Quote from: Drupaljohn

Thanks, tried that but doesn't seem to do much.
Now have added something like:

'document.write("<style type=text/css>#picslide{display: none;}<\/style>")');

in the front page document, where picslide is the div ID that contains the pictures. Seems to make things better in IE7 and FF2 (not in Opera) but still not what i am looking for. Will just have to tread the web till I find the right method,

Nice workaround :)

You could also do this in your CSS. Having this in your css file:

.js #picslide{display:none}

and then adding .js class to your body tag with javascript or jquery :)