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!

Register Log in
  • Congratulations SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

wait until image has loaded 1

Status
Not open for further replies.
AP81

AP81

Programmer
Apr 11, 2003
740
0
0
AU
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.
 
Sort by date Sort by votes
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:
Code Couch Tech Snippets & Info:
 
Upvote 0 Downvote
Hi

AP81 said:
My issue here is how can I tell when the image has finished loading?
Click to expand...
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.
 
Upvote 0 Downvote
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!
 
Upvote 0 Downvote
I understand your solution is a solution, but not a viable one.
Click to expand...

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.
Click to expand...

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:
Code Couch Tech Snippets & Info:
 
Upvote 0 Downvote
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.
 
Upvote 0 Downvote
Upvote 0 Downvote
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:
error.png
Line 9, Column 26: there is no attribute "LOWSRC".

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

Feherke.
 
Upvote 0 Downvote
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.

 
Upvote 0 Downvote
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.
 
Upvote 0 Downvote
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.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

waubain
  • Locked
  • Question
First image in slide gallery not showing - Uncaught TypeError: slides[(slideIndex - 1)] is undefined 1
Replies
2
Views
108
waubain
waubain
Raj Kumar
  • Locked
  • Question
Attached Formula image to add in javascript
Replies
1
Views
59
gmmastros
gmmastros
DougP
  • Locked
  • Question
Newbie question about making functions to pass image names for viewing larger
Replies
7
Views
74
vacunita
vacunita
tyutghf
  • Locked
  • Question
Image replacement script stopped working
Replies
2
Views
52
tyutghf
tyutghf
alanatabz
  • Locked
  • Question
Alignment of image
Replies
2
Views
48
vacunita
vacunita

Part and Inventory Search

Sponsor

Back
Top