wait until image has loaded 1

AP81 · Jan 29, 2009

OK...this is simple, but I can't get this working.

I click on a button and change an image's src, i.e.

Code:

<script type="text/javascript">
function showImage(imageName)
{
    var default_img = getElementById('defaultImage');
    
    tmp_img = new Image();
    tmp_img.src = imageName;
    default_img.width = tmp_img.width;
    default_img.height = tmp_img.height;
    default_img.src = imageName;
}
</script>

<button onclick="showImage('test1.jpg');">test</button>

The problem is that if I have a large image, i.e. 300KB, then this doesn't work.

I would like to display an animated gif until the image has finished loading, then display the image.

My issue here is how can I tell when the image has finished loading? Seeing as I can potentially have 30+ images, it would be overkill to pre-load them all.

My only other option is Ajax, but surely this can be done just with Javascript.

BillyRayPreachersSon · Jan 29, 2009

I gave you the exact solution to this specific problem in your last post - lowSrc.

thread216-1527281

Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

BillyRayPreachersSon · Jan 29, 2009

P.S. Here's how you set lowsrc:

Code:

var img = new Image();
img.lowsrc = 'loading.gif';
img.src = 'large_image.jpg';

Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

feherke · Jan 30, 2009

Hi

AP81 said:
My issue here is how can I tell when the image has finished loading?

The [tt]Image[/tt] object has [tt]onload[/tt] event handler and [tt]complete[/tt] property.

Code:

function showImage(imageName)
{
  var default_img = [red]document.[/red]getElementById('defaultImage');
    
  tmp_img = new Image();
  [red]tmp_img.onload=function() {[/red]
    default_img.width = [red]this[/red].width;
    default_img.height = [red]this[/red].height;
    default_img.src = imageName;
  [red]}[/red]
  tmp_img.src = imageName;
}

Feherke.

http://rootshell.be/~feherke/

AP81 · Jan 30, 2009

BillyRay...I understand your solution is a solution, but not a viable one. I don't think it is smart to pre-cache 30+ images that are potentially 300KB each, which would mean the page load = 8.7MB

feherke, thanks dude. Will give this a go!

BillyRayPreachersSon · Jan 30, 2009

I understand your solution is a solution, but not a viable one.

Perhaps you need to ask the right questions? You did, after all, ask for:

I would like to display an animated gif until the image has finished loading, then display the image.

Giving a 'lowsrc' of the animated GIF, and the 'src' of the real image will do exactly that.

If you didn't want that, why ask for it?

Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

feherke · Jan 30, 2009

Hi

AP81, please note that I only rewrote your code, but I do not fully understand the situation. When the button is pressed, will be loaded only 1 image or all 30+ of the given page ?

Dan, that [tt]lowsrc[/tt] sounds interesting. But I can not find it in W3C's HTML 4.01. ( I am looking for it in Including an image: the IMG element. ) Do you know something more about it ? ( Reading search results for "site:w3.org lowsrc" is in progress. )

Feherke.

http://rootshell.be/~feherke/

BillyRayPreachersSon · Jan 30, 2009

How odd. It is in the DOM level 1 specs:

http://www.w3.org/TR/2000/WD-DOM-Level-1-20000929/level-one-html.html#ID-17701901

Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

feherke · Jan 30, 2009

Hi

Yes, I found something similar. But Lord Validator denies it.

Code:

[COLOR=white gray] 1[/color] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]
[COLOR=white gray] 2[/color] <html>
[COLOR=white gray] 3[/color] <head>
[COLOR=white gray] 4[/color] <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
[COLOR=white gray] 5[/color] <title></title>
[COLOR=white gray] 6[/color] </head>
[COLOR=white gray] 7[/color] <body>
[COLOR=white gray] 8[/color] <p>
[COLOR=white gray] 9[/color] <img src="src.png" lowsrc="lowsrc.png" alt="">
[COLOR=white gray]10[/color] </p>
[COLOR=white gray]11[/color] </body>
[COLOR=white gray]12[/color] </html>

W3C HTML Validator said:
Line 9, Column 26: there is no attribute "LOWSRC".

[tt]<img src="src.png" lowsrc=[red]"[/red]lowsrc.png" alt="">[/tt]

Feherke.

http://rootshell.be/~feherke/

BillyRayPreachersSon · Jan 30, 2009

Ah well... I guess we have to set that attribute with JS to 'keep it standard', then!

Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

AP81 · Jan 30, 2009

Feherke, with PHP I output a whole pile of thumbnail images, somewhere around the 32 images mark. I have another div with an <img> as a placeholder. When I click on a thumbnail image, I display the fullsize version of the thumbnail. The issue here is that simply changing the src attribute of the placeholder image does not suffice because the image cannot be loaded quickly. If I click the same thumbnail a second time, it loads fine as the image is now in the browser cache.

Only one image at a time is ever displayed. It doesn't really matter whether the image is displayed in a pop-up window, but essentially I am trying to do this:

click on thumbnail image > display animated gif > show full size image when loaded.

Life would be a lot easier if I could use a JS framework, but all our JavaScript is written in house- which does it make it restrictive. The JS guru who writes most of the code is on holidays for a few weeks.

Honestly I didn't think something like this would be so difficult, but it is rather frustrating.

I have got this working with Ajax by making an call to a PHP template which loads the image to a hidden <img> tag, then on success the JS can load the image as normal. This to me seems way overkill and I'd like to avoid using using Ajax to solve this problem.

Thanks for your advice guys.

feherke · Jan 30, 2009

Hi

Ok. But why not just this ?

Code:

<script type="text/javascript">
function showImage(imageName)
{
    var default_img = getElementById('defaultImage');
    
    [red][s][gray]tmp_img = new Image();[/gray][/s][/red]
    [red][s][gray]tmp_img.src = imageName;[/gray][/s][/red]
    [red][s][gray]default_img.width = tmp_img.width;[/gray][/s][/red]
    [red][s][gray]default_img.height = tmp_img.height;[/gray][/s][/red]
    default_img.src = imageName;
}
</script>

<button onclick="showImage('test1.jpg');">test</button>

And of course, you specify no [tt]width[/tt] and [tt]height[/tt] for the [tt]img[/tt].

Feherke.

http://rootshell.be/~feherke/

AP81 · Jan 30, 2009

Cool, will give it a try!

AP81 · Feb 2, 2009

Feherke, the onload function works well. I'll just have to do some testing on a production server and see how it goes. If it doesn't work well I'll just implement my Ajax solution.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

wait until image has loaded 1

AP81

Programmer

BillyRayPreachersSon

Programmer

BillyRayPreachersSon

Programmer

feherke

Programmer

AP81

Programmer

BillyRayPreachersSon

Programmer

feherke

Programmer

BillyRayPreachersSon

Programmer

feherke

Programmer

BillyRayPreachersSon

Programmer

AP81

Programmer

feherke

Programmer

AP81

Programmer

AP81

Programmer

Similar threads

Part and Inventory Search

Sponsor