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 strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

hide image / resize image issue

Status
Not open for further replies.
tamakre

tamakre

Programmer
Sep 29, 2007
8
US
I have a site similar to a photo gallery and Im taking large(er) images (i.e. - 600 pixels wide in JPEG format) and using the javascript below to generate thumbnails of the images with the proper height / width ratio... issue is, when the page loads, they (the images Im resizing) all flash at full size for fraction of a second then scale down to the thumbnail size...

Its quick, but if possible I'd like to HIDE the images using something like display: hidden or visibility: none until the resize is done... I havent had any success with it though, can someone tell me / show me how I might integrate some sort of 'hide' element to this script?

Code: 
function getThumb1()
        {
            var theImgWt1 = document.getElementById('randImageFile_1');
   			theImgWt1.width = theImgWt1.width / 4.3;

            var theImgHt1 = document.getElementById('randImageFile_1');
			theImgHt1.height = theImgHt1.height / 1.3;
			
			

        }
 
Sort by date Sort by votes
Hi

Personally I would do :
Code: 
function getThumb1()
{
  var theImg=document.getElementById('randImageFile_1');
  theImg.style.visibility='hidden';
  theImg.style.width=(parseInt(theImg.style.width)/4.3)+'px';
  theImg.style.height=(parseInt(theImg.style.height)/1.3)+'px';
  theImg.style.visibility='visible';
}
By the way, why you declared two variables to refer to the same object ?

Feherke.
 
Upvote 0 Downvote
Thanks for the reply / code... it still (in Safari and IE7 shows a very quick 'large' image for each before the resize and in safari (for the pc) its really erratic... about 3 out of 10 attempts results in images reduced in width but NOT in height -- really strange.

Thanks again, Im using code based on your solution for now (note: I had to remove the px reference and the .style declaration though so what Im using looks like this:

Code: 
function getThumb1()
{
  var theImg1=document.getElementById('randImageFile_1');
  theImg1.style.visibility='hidden';
  theImg1.width=theImg1.width/5;
  theImg1.height=theImg1.height/1.2;
  theImg1.style.visibility='visible';
}

...to answer your questio about why I used two variables - its cause Im really stumbling my way throught it all! But Im learning and I do see how your solution is neater and more concise... can you help me understand somehting?

I originally thought I'd need to divide the height and width value by the SAME number, but that makes the images look wrong in terms of the height/width... why is it that Im having to use /5 for the width but have to use a smaller number for the height?
 
Upvote 0 Downvote
The problem with the image in html is that when the image loads even though it is set to hidden after loading it will reserve empty space for the image. If the image is 500 by 500 px it will have an empty space of 500 by 500 for the time script executes and looks strange too.
You can preload the images and set the source of your html images later when the preload and resize is done like so:
Code: 
<script>
function resize(){
	// resize the image
	this.width = this.width/4;
	this.height = this.height/4;
	// set the source of the html image to the source of this
	var img = document.getElementById(this.attributes.getNamedItem("idofimg").value);
	img.width = this.width;
	img.height = this.height;
	img.src = this.src;
	img.style.visibility = "visible";
	// not sure how to discard of the img object
	// the next line does not work in IE thats why its in
	// a try and catch
	try{
		delete this;
	}catch(e){}
}

function preload(){
	// here is only one image but you could use a whole lot of images
	// make sure each one has a unique idofimg (id of img)
	// do not us mixed case
	var i = document.createElement("img");
	i.onload = resize;
	var a = document.createAttribute('idofimg'); // do NOT use mixed case here
	// the value img1 is the id of the img html element (see html code below)
	a.nodeValue = "img1";
	i.attributes.setNamedItem(a);
	i.src = "Panjiayuan1.jpg";
}

</script>
<body onload="preload()">
<img id="img1" style="visibility: hidden" />

</body>


Greetings, Harm Meijer
 
Upvote 0 Downvote
Just found out that preloading is not needed. display: none will not occupy space of the image. This way you can just let it load by giving the <img element its source and onload resize it. After all this time I never stumbled across the display property.

Code: 
<script>
function resize(img){
    // resize the image
    img.width = img.width/4;
    img.height = img.height/4;
    img.style.display = "inline";
}
</script>
<body>
<img id="img1" src="myJPG.jpg style="display: none" onload="resize(this)" />

</body>

Greetings, Harm Meijer
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

JScannell
  • Locked
  • Question
Javascript issue on iPhone/iMac platforms
Replies
0
Views
284
JScannell
JScannell
waubain
  • Locked
  • Question
First image in slide gallery not showing - Uncaught TypeError: slides[(slideIndex - 1)] is undefined 1
Replies
2
Views
219
waubain
waubain
Raj Kumar
  • Locked
  • Question
Attached Formula image to add in javascript
Replies
1
Views
100
gmmastros
gmmastros
JPSeo
  • Locked
  • Question
Another cjhild_process.exec issue with complex shell command
Replies
0
Views
74
JPSeo
JPSeo
edd92
  • Locked
  • Question
Dropzone Issues
Replies
0
Views
109
edd92
edd92

Part and Inventory Search

Sponsor

Back
Top