Solved

show image

Posted on 2011-09-23
30
930 Views
Last Modified: 2012-08-13
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

0
Comment
Question by:VapiSoft
  • 14
  • 14
  • 2
30 Comments
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 36591142
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
 

Author Comment

by:VapiSoft
ID: 36592816
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36593591
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
 

Author Comment

by:VapiSoft
ID: 36593605
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36593630
Show us your html
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 36593632
<img src="/images/res_teams/10.png" style="visibility:hidden" onload="if (this.src.indexof('blank.gif')==-1) this.style.visibility='visible'" />
0
 

Author Comment

by:VapiSoft
ID: 36593740
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36594374
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
 

Author Comment

by:VapiSoft
ID: 36594586
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
 

Author Comment

by:VapiSoft
ID: 36594589
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36594816
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
 

Author Comment

by:VapiSoft
ID: 36594833
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36594838
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36595487
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
 

Author Comment

by:VapiSoft
ID: 36595512
I tried all this and even without loading the picture (not calling the setPicture1 function) and I still get the bad icon.
0
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 500 total points
ID: 36595561
I need to see your site.

0
 

Author Comment

by:VapiSoft
ID: 36595593

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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36595608
I'll look tomorrow
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36719551
I do not see it.

I see the words

manager
list of players
0
 

Author Comment

by:VapiSoft
ID: 36897078
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36898513
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
 

Author Comment

by:VapiSoft
ID: 36898607
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36898688
:)
0
 

Author Closing Comment

by:VapiSoft
ID: 36922474
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36922485
That is ok - I can wait.
0
 

Author Comment

by:VapiSoft
ID: 36973747
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36975082
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
 

Author Comment

by:VapiSoft
ID: 36975140
Thank you.
Do you know what does it mean?
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36975143
Sorry I have no idea. Try to google
"to get property Proxy.InstallTrigger"
0
 

Author Comment

by:VapiSoft
ID: 36975152
OK.
Thanks.
0

Featured Post

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

This article discusses how to create an extensible mechanism for linked drop downs.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

746 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now