<img onload="resize()" src="1024x768.jpg" /> problem

Forum Moderators: open

Message Too Old, No Replies

<img onload="resize()" src="1024x768.jpg" /> problem

It enlarged my 800x600 page when loading...

iProgram

1:29 pm on Feb 1, 2006 (gmt 0)

I have a 800x600 page and want to display a large picture (I don't know its width&height). Here is the js code I use to resize all imgs:

function resize(img)
{
if(img.width>800)
{
img.height = parseInt(img.height * 800 / img.width);
img.width = 800;
}
}

It works very well and the only problem is, when the page is loading (before execute the resize() function), the picture (in its original size) will enlarge my 800x600 page. Though the page will restore to normal after a few seconds... But I need a perfect solution, right?

iProgram

1:37 pm on Feb 1, 2006 (gmt 0)

You can save the following code to HTML to see my problem:

<html>
<head>
<title>test</title>
<script type="text/javascript">
function resize(img)
{
if(img.width>800)
{
alert('now the page is enlarged by this big pic');
img.height = parseInt(img.height * 800 / img.width);
img.width = 800;
alert('now this layout is what I need');
}
}
</script>
</head>
<body>
<div style="border: 3px solid #0000ff; width: 800px; margin: auto;">
<img src="http://static.flickr.com/39/94067824_8d524b6a47_o.jpg" onload="resize(this)" />
</div>
</body>
</html>

DrDoc

7:12 pm on Feb 1, 2006 (gmt 0)

function resize(img) {
if(img.width > 800) {
img.style.height = parseInt(img.height * 800 / img.width);
img.style.width = 800;
}
img.style.visibility = "visible";
}

This hides the image until it has loaded and been resized.

iProgram

6:12 am on Feb 2, 2006 (gmt 0)

Tried and it does not work, because

if(img.width > 800)

always returns false.

alert(img.width) ====== 100px :(

DrDoc

5:20 am on Feb 3, 2006 (gmt 0)

heh, didn't think about that :)

function resize(img) {
if(img.width > 800) {
img.style.height = parseInt(img.height * 800 / img.width);
img.style.width = 800;
}
img.style.position = "static";
img.style.visibility = "visible";
}

This hides the image until it has loaded and been resized.

iProgram

6:49 am on Feb 3, 2006 (gmt 0)

Thank you for your help DrDoc. The second method is better than the old one. But I can still see the horizontal scroll bar when loading the page.

DrDoc

6:55 am on Feb 3, 2006 (gmt 0)

I would recommend using "display: none" instead of "visibility: hidden" (and just forget about the positioning stuff), and then set display to "inline" after resizing the image ... But since "display: none" technically results in not rendering the element, it cannot be guaranteed to work in all browsers, nor guaranteed to keep working in the future for browsers it currently works in.

DrDoc

7:05 am on Feb 3, 2006 (gmt 0)

I wonder why I wasn't thinking about this before! Duh!
Use a preloader :)

<img src="transparent.gif" onload="resize(this)" /> 
... 
<script type="text/javascript"> 
function resize(which) { 
  img = new Image(); 
  img.src = "someimage.jpg"; 
  // alert("width: " + img.width + "\nheight: " + img.height); 
  if(img.width > 800) { 
    which.style.height = parseInt(img.height * 800 / img.width) + "px"; 
    which.style.width = "800px"; 
  } 
  which.src = img.src; 
} 
</script>

Downside: if JavaScript is disabled, no image will display.

iProgram

8:23 am on Feb 3, 2006 (gmt 0)

NB! plug and play.

Need to fix a bug to prevent loading img from time to time:

<img src="http://www.full-url-required.com/trun-on-your-javascript.gif" onload="resize(this, 'http://www.site.com/1024x768.jpg)" />
<script type="text/javascript">
function resize(which, src)
{
if(which.src!= 'http://www.full-url-required.com/trun-on-your-javascript.gif')
{
return;
}
img = new Image();
img.src = src;
if(img.width > 800)
{
which.style.height = parseInt(img.height * 800 / img.width) + "px";
which.style.width = "800px";
}
which.src = img.src;
}
</script>

iProgram

10:52 am on Feb 3, 2006 (gmt 0)

Ok the above code does not work if the image is not in browser cache because new Image().src='...' need to download this (large) image first. So the final answer is use the large picture as src value of this img tag and assign an 1px width/height value to hide it!

kaled

11:33 am on Feb 3, 2006 (gmt 0)

Can you not use the CSS max-width and max-height properties? Granted this will not work directly in IE but you can use expressions to make it work in IE (assuming js is enabled).

Kaled.

iProgram

12:47 pm on Feb 3, 2006 (gmt 0)

Can you show me some sample code? I don't understand your max-width/height thing.

kaled

4:55 pm on Feb 3, 2006 (gmt 0)

Try this but it will only work in Mozilla/Opera. If it's ok, expressions can be used in IE (I think).

<img src="1024x768.jpg" style="max-width:800px; max-height:600px" />

Kaled.