Spartanicus wrote:
"Richard Cornford" <Ri*****@litotes.demon.co.ukwrote:
>>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.
