Link to home
Start Free TrialLog in
Avatar of VapiSoft
VapiSoft

asked on

show image

Hi,

I have a function in JavaScript that shows pictures from the net (ie. http://www.fmisrael.com/images/res_teams/10.png).
I first calculates the best size to fit in a specified rectangle and then shows the picture:
image.src=picture;

The problem is that it always displays a 'no-picture' icon first and then shows the picture.
I attached the code and the picture of the 'no-picture' icon.
 User generated image
function setPicture1(image,picture,w2,h2,n,h200,pic_name,from_error)
{
 var img = new Image(); 
 img.src = picture; 
 
 if (n) last_selected_picture=picture;
 
 var w1=img.width;
 var h1=img.height;

 if ((h1 < 3) || (w1 < 3)) 
 {
  if (n == 0) return;
  if (n) setTimeout(function(){setPicture1(image,picture,w2,h2,n-1,h200,pic_name);},1000);
  return;
 }
 
 var w0=w2;
 var h0=h2;
 
 var r=h1/w1;
 if (r < 1)
 {
  var h3=w2*r;
  if (h3 > h2)
  {
   w2=(h2/h3)*w2;
  }
  else
  {
   h2=h3;
  }
 }
 else
 {
  r=w1/h1;
  var w3=h2*r;
  if (w3 > w2)
  {
   h2=(w2/w3)*h2;
  }
  else
  {
   w2=w3;
  }  
 }
 
 image.style.width =w2+'px';
 image.style.height=h2+'px'; 
 //image.onerror=function(){picture_not_found(pic_name,image,picture,w2,h2,h200,from_error);}
 image.src=picture;
 
 image.style.position='relative';
 if (image.parentNode && image.parentNode.style)
     image.parentNode.style.position='relative';

 if (h0 > 50)
 {
  var t=parseInt((parseInt(h200)-parseInt(h2))/3)+10;
  image.style.marginTop=t+'px'; 
 } 
}

Open in new window

Avatar of Jason C. Levine
Jason C. Levine
Flag of United States of America image

That's happening because the browser sees the image tag and renders it while the JavaScript processes the image.  When the JavaScript finishes, the image loads.  
Avatar of VapiSoft
VapiSoft

ASKER

I don't see this problem in other sites.
Even hen I show the same directly in the browser.
It looks very bad, what can I do to overcome this problem?
Like this?

<img src="blank.gif" />

or

<img src="blank.gif" style="visibility:hidden" onload="if (this.src.indexof('blank.gif')==-1) this.style.visibility='visible'" />
I don't understand what you wrote.

if my picture is "http://www.fmisrael.com/images/res_teams/10.png"

How do I write the code ???
Show us your html
<img src="/images/res_teams/10.png" style="visibility:hidden" onload="if (this.src.indexof('blank.gif')==-1) this.style.visibility='visible'" />
Please note that my code is a JavaScript script and not html.

So I did the following:

 image.src=picture;
 image.style.visibility="hidden";
 image.onload="if (this.src.indexof('blank.gif')==-1) this.style.visibility='visible'";

But now I see the 'no-picture' icon and then it is blank (no picture at all).


Your code is not standalone. There must be an image tag on your page since I do not see any document.write or appendChild

I am taking about the image you are passing in
setPicture1(image

and where is the code that calls setPicture1 ???
I create the "<img>  in the function that calls this function inside a <div> object in my HTML.
leag_picture->SetPicture1
Attach is the function that calls this function
Oops I see tha the code was not attached.
function leag_picture(picture,cell_name)
{
 var pic_name=cell_name+'_img'; 
 var div_img1=div_img;
 div_img1=div_img.replace(/picture/,pic_name);
 
 var  div = getobj(cell_name);
 if (picture.match(/^data/i) || picture.match(/^Images/i))
 {
  div.innerHTML=div_img1;
  picture="../"+picture;
 }
 else
 {
  div.innerHTML='<a class="abcdef" href="'+getSiteUrl(picture)+'" target="+blank">'+div_img1+'</a>';
 }
 
 if (!browser_is_ie) 
 {
  if (cell_name == 't31') div.style.width="97%";
  else
  if (cell_name == 't25') div.style.width="100%";
 }

 image=getobj(pic_name);
 if (!image) return;
 
 var w2=div.offsetWidth-20;  
 var h2=div.offsetHeight-20; 
 var h200=h2;
 
 if (w2 < 80) w2=80;
 if (h2 < 80) h2=80;
 
 div.style.textAlign='center';
 div.style.overflow ='hidden';
 
 setPicture1(image,picture,w2,h2,3,h200,pic_name,0);
}

Open in new window

You have a (global) variable called div_img which is likely the image tag I want you to change. It would be useful to see complete code or a URL instead of snippets of possibly irrelevant code.
The code is too large (about 50 files).
The URL points to a facebook app that is in Hebrew so I don't think it is helpful.

This is the div_img

var div_img='<img id=\"picture\" />';

What do you want me to change ???

See my original post. THAT is the tag that needs a blank image and/or needs the visibility hidden when it is put on the page before the script change it. I am pretty sure your code can be simplified anyway
case in point

var div_img1=div_img;
div_img1=div_img.replace(/picture/,pic_name);

can be written

var div_img1=div_img.replace(/picture/,pic_name);


To answer your question, have

var div_img='<img id="picture" src="blank.gif: />'; // blank.gif is a 1px transparent gif

or if necessary

var div_img='<img id="picture" src="blank.gif" style="visibility:hidden" onload="if (this.src.indexof('blank.gif')==-1) this.style.visibility='visible'" />';
I tried all this and even without loading the picture (not calling the setPicture1 function) and I still get the bad icon.
ASKER CERTIFIED SOLUTION
Avatar of Michel Plungjan
Michel Plungjan
Flag of Denmark image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial

The URL is: http://apps.facebook.com/my-league/
See the attached picture how to get to the TAB with the picture.
 User generated image
I'll look tomorrow
I do not see it.

I see the words

manager
list of players
Ok, this means that the "team" is not selected yet.
To do that you need to first select the team:
Click on the first (right TAB) and then on the link in the first row (as in the attached picture).
ScreenShot-203.jpg
I do not get a list like that.

I get this message on the first tab after I close two popups and the dropdown with icons


Screen-shot-2011-10-02-at-07.29..png
OK, now I understand that it is because this is the first time.
I will do something so it will open in the right place without anything you have to do.
I am sorry but I did not have the time (yet) to set a direct link to the picture, so I decided to give you the points because you invested a lot of time trying to help me.
Thanks.
That is ok - I can wait.
Hi mplungian,

Finally I got it working (that you can enter irectly to the page).
http://apps.facebook.com/my-league/index.php?page=1,1920,2348,3
If you ente this page you will see that the picture is first displayed as a 'bad'icon and then (after a second) it is displayed.
I get the diamond immediately in Fx8 on OSX
I also get
Error: uncaught exception: Error: Permission denied for <http://1.121.channel.facebook.com> to get property Proxy.InstallTrigger
and
Error: uncaught exception: Error: Permission denied for <http://apps.facebook.com> to get property Proxy.InstallTrigger
when I reload
Thank you.
Do you know what does it mean?
Sorry I have no idea. Try to google
"to get property Proxy.InstallTrigger"
OK.
Thanks.