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.
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.
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';
}
}
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.
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?
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.g if')==-1) this.style.visibility='vis ible'" />
<img src="blank.gif" />
or
<img src="blank.gif" style="visibility:hidden" onload="if (this.src.indexof('blank.g
ASKER
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 ???
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.g if')==-1) this.style.visibility='vis ible'" />
ASKER
Please note that my code is a JavaScript script and not html.
So I did the following:
image.src=picture;
image.style.visibility="hi dden";
image.onload="if (this.src.indexof('blank.g if')==-1) this.style.visibility='vis ible'";
But now I see the 'no-picture' icon and then it is blank (no picture at all).
So I did the following:
image.src=picture;
image.style.visibility="hi
image.onload="if (this.src.indexof('blank.g
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 am taking about the image you are passing in
setPicture1(image
and where is the code that calls setPicture1 ???
ASKER
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
leag_picture->SetPicture1
Attach is the function that calls this function
ASKER
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);
}
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.
ASKER
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 ???
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/,p ic_name);
can be written
var div_img1=div_img.replace(/ picture/,p ic_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.g if')==-1) this.style.visibility='vis ible'" />';
var div_img1=div_img;
div_img1=div_img.replace(/
can be written
var div_img1=div_img.replace(/
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.g
ASKER
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
The URL is: http://apps.facebook.com/my-league/
See the attached picture how to get to the TAB with the picture.
I'll look tomorrow
I do not see it.
I see the words
manager
list of players
I see the words
manager
list of players
ASKER
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
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
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
ASKER
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 will do something so it will open in the right place without anything you have to do.
:)
ASKER
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.
Thanks.
That is ok - I can wait.
ASKER
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.
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
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
ASKER
Thank you.
Do you know what does it mean?
Do you know what does it mean?
Sorry I have no idea. Try to google
"to get property Proxy.InstallTrigger"
"to get property Proxy.InstallTrigger"
ASKER
OK.
Thanks.
Thanks.