images

[ivan3510]

I saw one page where image was loading. First, there was something like this image (in this text: first image): click. And then, when image (real) loaded, it replace first image. Do you maybe know how to do that? (I don't remember the URL of this page.). Thanks!

[Airshow]

Ivan,

It may have been done with <img src="myLowsrcURL" lowsrc="mySrcURL" /> , but lowsrc was never officially adopted by the W3C. Cross-browser support for lowsrc is therefore probably poor (I have not used it for years) but by all means try it.

Alternatively you can use <img src="mylowSrcURL" onload="this.src='mySrcURL';" /> , which will have roughly the same effect. I think you will find that this is better supported than lowsrc but again, you will find reports of img onload failing to fire in some browsers/platforms.

The window.onload event is much more reliable, so it's really advisable to perform such image replacement(s) in the window.onload handler, eg

window.onload = function(){
  var img = document.getElementById("myImageID");
  img.src = "mySrcURL";
  .....
}

In both cases make sure the lowsrcURL image is significantly smaller (in bytes) than the mySrcURL image other wise there's potentially more disbenefit than benefit.

You should also set img width and height attributes to ensure that the lowsrc image renders at the same size as the src image that will replace it.

Airshow

[ivan3510]

OK. Thanks! But I changed my mind (if I put the image to replace the image, this first image also must be loaded). So, can you do this with text. something like this:

<script type="text/javascript">
//?? something
//if image loaded then show it
document.getElementById('text').innerHTML="";
</script>
<div id="text">Loading images... please wait</div>

[Airshow]

Ivan,

Yes you can indeed do something like that but it's complicated with one "loading" message for multiple images.

The reason it's complicated is because
a) the message should only disappear when all images are loaded.
b) if further images are loaded later in the life of the page, then you most probably want "loading" to show/hide again.

This can all be achieved but it involves more thought and more code.

Airshow

[ivan3510]

OK. THANKS!