...

View Full Version : Resize images before displaying them on screen



bredge
08-22-2011, 10:42 PM
Hello there I am using the below code to resize images posted on a forum, however when the page is loading it loads the images full size on sreen stretching the page to however wide the largest picture is and only resizes them once every picture has loaded and the page then goes back to normal width.

Does anyone know how I could make it so the images only display once they've resized ?



<script>

window.onload = resizeimg;
function resizeimg()
{
var theImages = document.getElementsByTagName('img');

for( var i = 0; i < theImages.length; i++ )
{
im = theImages[ i ];

if( im.width > 468 && !/\/(pic1\.jpg|pic2\.jpg)/i.test( im.src ) )
{
im.style.width = '466px';
im.style.border = "1px solid #000000";
im.style.padding = "2px";
im.style.marginBottom = "1px";
im.onclick = function()
{
window.open( this.src, 'fullscale','width='+ this.width +', height='+ this.height +',scrollbars=1,resizable=1').focus();
}

try{ im.style.cursor = 'hand';}catch(e){ im.style.cursor = 'pointer'; }

im.title = 'Click Here To See Image Full Size ';
}
}
}
</script>

Logic Ali
08-23-2011, 01:37 AM
Instead of running the code on load, call the function at a point in the document below all <img> tags.
That way the resizing should take place before any images load.

devnull69
08-23-2011, 01:14 PM
That way the resizing should take place before any images load.

This is not possible because the code accesses the width property of the images which is only available after the images finished loading.

There is one thing you can do: Set all images to display:none and use an image preloader (search for "javascript image preload") to load all the images without displaying them. Then you can run the script to set the width/height of the images before setting them to display: inline again.

devnull69
08-23-2011, 01:14 PM
sorry double post

Logic Ali
08-23-2011, 03:09 PM
This is not possible because the code accesses the width property of the images which is only available after the images finished loading.
The code is accessing the <img> elements, whose height and width parameters determine the displayed size of the image.

devnull69
08-23-2011, 04:22 PM
@Logic_Ali: I am not sure about that, because the OP refused to show us all of his/her code, especially the HTML. But from the description I assumed that the <img> tags don't have width or height attributes and will be stretched to their full size. That's why he/she wanted to introduce width and height to the images afterwards.

In that case the width/height properties of the images would only be available after the images have been loaded.

bredge
08-23-2011, 06:23 PM
So do you guys think there is a way to do it ?

bredge
09-01-2011, 10:42 PM
Anyone ?

rnd me
09-02-2011, 01:22 AM
css:

img {display:none;}
.done img {display:inline; display:inline-block;}


js

function resizeimg(){
document.body.className+=" done";
// ... same as orig

bredge
09-05-2011, 10:52 PM
function resizeimg(){
document.body.className+=" done";
// ... same as orig

That works stopping the page stretching but you get no images display !!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum