Wait until image is loaded befor reading it's resolution

[AcumenP]

Hi all,

After searching for the solution for my "problem" I also bumped on this forum. It seems like a forum with a lot of knowledge, so I subscribed in the hope to help and be helped

The thing is, I am working on an easy page to show my photographical work. Per category I want to make one page and show several photo's by clicking next. Everything works just fine except for this.

function LoadImg(imgSrc) {
var newImg = new Image();
newImg.src = imgSrc;
document.getElementById('PhotoWidth').style.backgroundImage = "url("+imgSrc+")";
document.getElementById("PhotoWidth").style.width = newImg.width+"px"
document.getElementById("PhotoHeight").style.height=newImg.height+"px"
};

I use the image size parameters to read the image size and so size my table, where it's a background image of. So I have to load the image, and then read the resolution. This works fine as long as the image is loaded fast enough, but that is not always the case.

So I tried things like:

do { } while (!newImg.complete);

and the setTimeout and setInterval "statements", but non of them seem to work.

Resume, I want Javascript to wait until "newImg.complete=true"...

Is there anyone who knows how to fix it?....

 

[AcumenP]

By the way, yes, I have searched the forum. Unfortunately I did not find the answer to my question.

 

[feherke]

Hi

[b]function[/b] [COLOR=darkgoldenrod]LoadImg[/color][teal]([/teal]imgSrc[teal])[/teal]
[teal]{[/teal]
  [b]var[/b] newImg [teal]=[/teal] [b]new[/b] [COLOR=darkgoldenrod]Image[/color][teal]();[/teal]
  newImg[teal].[/teal]onload[teal]=[/teal][b]function[/b][teal]()[/teal] [teal]{[/teal]
    document[teal].[/teal][COLOR=darkgoldenrod]getElementById[/color][teal]([/teal][green][i]'PhotoWidth'[/i][/green][teal]).[/teal]style[teal].[/teal]backgroundImage [teal]=[/teal] [green][i]"url("[/i][/green][teal]+[/teal]imgSrc[teal]+[/teal][green][i]")"[/i][/green][teal];[/teal]
    document[teal].[/teal][COLOR=darkgoldenrod]getElementById[/color][teal]([/teal][green][i]"PhotoWidth"[/i][/green][teal]).[/teal]style[teal].[/teal]width [teal]=[/teal] newImg[teal].[/teal]width[teal]+[/teal][green][i]"px"[/i][/green][teal];[/teal]
    document[teal].[/teal][COLOR=darkgoldenrod]getElementById[/color][teal]([/teal][green][i]"PhotoHeight"[/i][/green][teal]).[/teal]style[teal].[/teal]height[teal]=[/teal]newImg[teal].[/teal]height[teal]+[/teal][green][i]"px"[/i][/green][teal];[/teal]
  [teal]}[/teal]
  newImg[teal].[/teal]src [teal]=[/teal] imgSrc[teal];[/teal]
[teal]}[/teal]

As an alternative ( or enhancement, depending on your goal ), take a look at Javascript EXIF Reader by Jacob Seidelin.

Feherke.

http://rootshell.be/~feherke/

 

[AcumenP]

As simple as that...
Man o man... I have been searching for tree evenings...

Thanks a lot!
I will take a look at the site suggested.