Spartanicus wrote:
Quote:
"Richard Cornford" <Richard@litotes.demon.co.ukwrote:
>
Quote:
Quote:
>>Using a solution like using CSS to initially switch
>>the display of the image off, then enable it again
>>via JS makes the solution dependant on JS, so that's
>>out (and it can cause an ugly reflow).
>>
>You can certainly avoid the dependency on javascript by
>having an inline script initially hide the contents as
>the page is loading and then re-show the contents in the
>onload event handler.
>
That would solve one of the problems I described (an
external JS file loading after the HTML page). But it
doesn't solve the other case (a slow client). Using Opera
or Firefox I see the first image being displayed before it
is replaced by the script in the example I provided which
uses in document script code.
I think you are being pessimistic. Try this (you will have to provide
your own images):-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
</head>
<style type="text/css">
IMG {
float:right;
}
</style>
<body>
<script type="text/javascript">
/* The body should be defined at this point so make
it invisible if it can be found:-
*/
if(
(document.body)&&
(document.body.style)
){
document.body.style.visibility = 'hidden';
window.onload = function(){
var img, c, div;
/* "Gateway" test for the required features:-
*/
if(
(document.images)&&
(c = document.images.length)&&
(img = document.images[--c])&&
(img.appendChild)&&
(img.removeChild)&&
(document.createElement)
){
/* Re-arrange the DOM and deprive the images of their
float styles, so that any rendering prior to the
re-arrangement is apparent. This takes the place of
your script initialisation code:-
*/
do{
img.style.cssFloat = img.style.styleFloat = 'none';
div = document.createElement('DIV');
document.body.appendChild(div);
div.appendChild(img);
}while(img = document.images[--c]);
}
/* Make the body visible again, regardless of the success of
the DOM re-arrangement as the user will still need to see
the content:-
*/
document.body.style.visibility = '';
}
}
</script>
<img src="images/grid50x50_Cyan.gif">
<img src="images/grid50x50_Cyan_K.gif">
<img src="images/grid50x50_Cyan_P.gif">
<img src="images/grid50x50_Cyan_Y.gif">
<img src="images/grid50x50_Mag.gif">
<img src="images/grid50x50_Mag_K.gif">
<img src="images/grid50x50_Mag_P.gif">
<img src="images/grid50x50_Mag_Y.gif">
<img src="images/grid50x50_Yellow.gif">
<img src="images/grid50x50_Yellow_K.gif">
<img src="images/grid50x50_Yellow_P.gif">
<img src="images/grid50x50_Yellow_Y.gif">
</body>
</html>
Richard.
