Member Avatar for MDGM

hi all,

I have a special type of gallery on my website (http://www.grafax.co.uk/newtest/gallery) which uses a javascript file to make a div tag hover over the gallery with the image inside of it. however, the page shows before the javascript file is loaded, and so displays the image in the wrong way. Is there a command which makes the user's computer preload the javascript file before allowing the user to click on the hyperlinks or showing the page? i thought somthing like <body onload...> might work. Hopfully somthing simple will work, and the script should not slow down the loading of a page much as it is very small.

Thanks,

Max:mrgreen:

  • 3 Contributors
  • 2 Replies
  • 138 Views
  • 2 Months Discussion Span
  • Latest Post Latest Post by MattEvans
Member Avatar for MattEvans

hmm.. you could try this approach:

have the page load up with the <body> element either disabled or un-visible, specified in the element's inline "style" attribute. i.e.

<body style="visibility:hidden;">..

at the end of the javascript file that you want to be loaded; add the line

document.onload = function() { document.body.style.visibility = "visible";};

You might even get away with just putting

this.style.visibility = 'visible';

into the body onload attribute directly; because onload shouldn't be called until the page is infact loaded.

you may need to put the page content inside another container object (<div>) if you find that visibility doesn't work on the body element.. display:none; is another way to turn of visibility; to undo that, set display to nothing ( ..style.display = ""; )

erm; also, the page wont show atall unless a script is linked that turns it's visibility back on.. so, think carefully about non-JS users who still have CSS =P

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.