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.
 no-picture
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

VapiSoftAsked:
Who is Participating?
 
Michel PlungjanConnect With a Mentor IT ExpertCommented:
I need to see your site.

0
 
Jason C. LevineNo oneCommented:
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.  
0
 
VapiSoftAuthor Commented:
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?
0
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
Michel PlungjanIT ExpertCommented:
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'" />
0
 
VapiSoftAuthor Commented:
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 ???
0
 
Michel PlungjanIT ExpertCommented:
Show us your html
0
 
Jason C. LevineNo oneCommented:
<img src="/images/res_teams/10.png" style="visibility:hidden" onload="if (this.src.indexof('blank.gif')==-1) this.style.visibility='visible'" />
0
 
VapiSoftAuthor Commented:
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).


0
 
Michel PlungjanIT ExpertCommented:
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 ???
0
 
VapiSoftAuthor Commented:
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
0
 
VapiSoftAuthor Commented:
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

0
 
Michel PlungjanIT ExpertCommented:
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.
0
 
VapiSoftAuthor Commented:
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 ???

0
 
Michel PlungjanIT ExpertCommented:
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
0
 
Michel PlungjanIT ExpertCommented:
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'" />';
0
 
VapiSoftAuthor Commented:
I tried all this and even without loading the picture (not calling the setPicture1 function) and I still get the bad icon.
0
 
VapiSoftAuthor Commented:

The URL is: http://apps.facebook.com/my-league/
See the attached picture how to get to the TAB with the picture.
 The site
0
 
Michel PlungjanIT ExpertCommented:
I'll look tomorrow
0
 
Michel PlungjanIT ExpertCommented:
I do not see it.

I see the words

manager
list of players
0
 
VapiSoftAuthor Commented:
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
0
 
Michel PlungjanIT ExpertCommented:
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
0
 
VapiSoftAuthor Commented:
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.
0
 
Michel PlungjanIT ExpertCommented:
:)
0
 
VapiSoftAuthor Commented:
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.
0
 
Michel PlungjanIT ExpertCommented:
That is ok - I can wait.
0
 
VapiSoftAuthor Commented:
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.
0
 
Michel PlungjanIT ExpertCommented:
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
0
 
VapiSoftAuthor Commented:
Thank you.
Do you know what does it mean?
0
 
Michel PlungjanIT ExpertCommented:
Sorry I have no idea. Try to google
"to get property Proxy.InstallTrigger"
0
 
VapiSoftAuthor Commented:
OK.
Thanks.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.