hi,
i've set up several javascript effects on my page, so now i need some controls to have completely loaded before the user can interact with the page. how can i control the rendering times?
thanks.
yasser.
yasserstein 0 Newbie Poster
MattEvans 473 Veteran Poster Team Colleague Featured Poster
strictly, you can't. browsers seem to have their own rendering order, and this can change depending on the document type of the page being rendered.
you can 'hide' a page's content until the page raises the 'onload' event, which should be done when the page has been fully 'loaded' into the browser, at this point, it should be possible for it to be rendered instantaneously..
<html>
<head>
</head>
<body style="display:none;" onload="this.style.display='';">
<img src="some_huge_image.bmp"/>
</body>
</html>This has the disadvantage that, the user sees nothing until the page has loaded..
yasserstein 0 Newbie Poster
i see. what if i use this very property - display - to delay the display of certain controls?
can i do that?
thanks.
MattEvans 473 Veteran Poster Team Colleague Featured Poster
you can use it to control the display of anything, it hides the element it is applied to and all elements that are descendants of that element.
if you were hiding another element, you'd have to use the getElementById( ) function or similar in the body onload event to get hold of the element to re-display.
But, there is only an onload event on the html>body element. There isn't one for every element on the page. The body onload is raised ( in theory ) when everything in the document has been loaded.. exactly what that means isn't particularly well defined.
if you place a script element some way down the code in a page, it's pretty safe to assume that the script in it will be executed after all of the document above that point has been loaded. ( but loaded is not the same as rendered ). i.e, in the same vein as the previous example:
<html>
<head>
</head>
<body>
<img id="img1" style="display:none;" src="some_huge_image.bmp"/>
<script type="text/javascript">
document.getElementById( 'img1').style.display='';
</script>
</body>
</html>In this case, it's pretty much certain that the script will execute when the <img/> tag has been interpretted and is ready to be rendered, or perhaps even has been rendered. But the image will not neccessarily have been sourced ( i.e. the actual image data might still be being downloaded when the script runs ), because most browsers push that task to 'after' the page has been rendered.
Whats the 'type' of thing that you want to wait for? Is it loading images, code, style, something dynamic ( i.e. ajax ), animation/movie, activex, or something else?
yasserstein 0 Newbie Poster
my page has several image controls on it. the problem with this is that i'm including a javascript code off dynamicdrive.com for a slideshow. the slideshow will typically start whenever the user clicks any image.
the problem is that if the user clicks an image so early that the page has not finished download all the images yet, that image is displayed alone in a new page, which is not what i want.
i want all images to finish downloading before the user gets to click any of them.
so i guess that's doable by using the
onload="this.style.display='';"
body event.. what do you think?
thanks :)
yasser.
MidiMagic 579 Nearly a Senior Poster
One thing you could do is put a name link to the same page in (instead of the real link), and then, have javascript change the link to the real link.
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.