Image doesn't load until I refresh page. document.write???

[osu9400]

My wife is professional photographer and I am building a new proof site for her. The proof pages load, but the image is not visible until I refresh it. Does anyone have any idea this would happen?

Here is a sample page (you can view source on this page): http://www.gentryfoto.com/test/pages/(1013).htm

Here is the code that loads the image. Keep in mind these values aren't hard coded. They are generated at pubish time in Photoshop.
http://www.gentryfoto.com/js2.jpg

[vpguy]

The pictures appear fine for me without having to refresh the page in IE7, FF2 and Opera 9.

Is it possibly the Minefield browser which is to blame?

[osu9400]

Thanks for the reply. I needed to get this fixed tonight so I removed the dynamic width portion of the site. I now manually set the width and it is bugging. You probably viewed the site after I "fixed" it.

After viewing the code sample in the jpg, did anything stand out that might be wonrg?

[vpguy]

Thanks for the reply. I needed to get this fixed tonight so I removed the dynamic width portion of the site. I now manually set the width and it is bugging. You probably viewed the site after I "fixed" it.

After viewing the code sample in the jpg, did anything stand out that might be wonrg?
Oh... bad timing on my part. :p

I don't really see anything wrong with the code, but it could certainly be shortened. The following code should accomplish the same thing:


var i = new Image();
i.src = "../images/(1013).jpg";
var w = Math.min(i.width, 680);

document.write("<a name='13' href='../index.htm#13'><img border='0' src='../images/(1013).jpg' width='" + w + "' alt='(1013)'><br>");

[osu9400]

Thanks. That makes perfect sense. I'll try it and see if it makes any difference. Can you tell I learned to program on the old 3g languages like Pascal!?!?!

Are there any caveats I need to be aware of with document.write that could be causing the problem?

Oh... bad timing on my part. :p

I don't really see anything wrong with the code, but it could certainly be shortened. The following code should accomplish the same thing:


var i = new Image();
i.src = "../images/(1013).jpg";
var w = Math.min(i.width, 680);

document.write("<a name='13' href='../index.htm#13'><img border='0' src='../images/(1013).jpg' width='" + w + "' alt='(1013)'><br>");

[vpguy]

Are there any caveats I need to be aware of with document.write that could be causing the problem?
Not that I can think of. Ideally it would be better if you could dynamically insert the image on the server side, instead of with Javascript, but if that's not possible then what you have should work fine (as long as the visitor has Javascript enabled).

[Logic Ali]

Oh... bad timing on my part. :p

I don't really see anything wrong with the code, but it could certainly be shortened. The following code should accomplish the same thing:


var i = new Image();
i.src = "../images/(1013).jpg";
var w = Math.min(i.width, 680);
Doing that can lead to bad timing. The .width property isn't available until the image file loads, and therefore should not be read immediately after assigning .src. An onload handler should be used:
var i = new Image();
i.onload=function(){document.images['image13'].width=Math.min(this.width, 680)}
i.src = "../images/(1013).jpg";

......

document.write("<a name='image13' href='../index.htm#13'><img border='0' src='../images/(1013).jpg' alt='(1013)'><br>");

[osu9400]

Logic-

Thanks for the suggestion. I implemented but it is still not resizing. Here is the resultant code. Am I missing something?


<script type="text/javascript"><!--
var i = new Image();
i.onload=function(){document.images['Image14'].width=Math.min(this.width, 680)}
i.src = "../images/(1014).jpg";

document.write("<a name='Image14' href='../index.htm#14'><img border=0 src="+ i.src +" alt='(1014)'><br>");
//-->
</script>
[CODE]



Doing that can lead to bad timing. The .width property isn't available until the image file loads, and therefore should not be read immediately after assigning .src. An onload handler should be used:[CODE]
var i = new Image();
i.onload=function(){document.images['image13'].width=Math.min(this.width, 680)}
i.src = "../images/(1013).jpg";

......

document.write("<a name='image13' href='../index.htm#13'><img border='0' src='../images/(1013).jpg' alt='(1013)'><br>");

[Logic Ali]

Logic-

Thanks for the suggestion. I implemented but it is still not resizing. Here is the resultant code. Am I missing something?

[CODE]
<script type="text/javascript"><!--
var i = new Image();
i.onload=function(){document.images['Image14'].width=Math.min(this.width, 680)}
i.src = "../images/(1014).jpg";

document.write("<a name='Image14' href='../index.htm#14'><img border=0 src="+ i.src +" alt='(1014)'><br>");
//-->
</script>
[CODE]The name must be applied to the <img> tag, not the link. Also the document.write must be performed first, before creating the Image object, or the code could refer to an unrendered element.
The image tag must have the filename specified by default:

<script type="text/javascript">

document.write("<a href='../index.htm#14'><img name='Image14' border=0 src='../images/(1014).jpg' alt='(1014)'><br>");

var i = new Image();
i.onload=function(){document.images['Image14'].width=Math.min(this.width, 680)}
i.src = "../images/(1014).jpg";

</script>Couldn't you write the size of each image into the tag with PHP?

[osu9400]

Because I don't know PHP. If it is simnpler than JS please let me know. I still can't get this JS onload stuff to work! When I place the doc.write first, the page loads with no image.

I'm very frustrated.


The name must be applied to the <img> tag, not the link. Also the document.write must be performed first, before creating the Image object, or the code could refer to an unrendered element.
The image tag must have the filename specified by default:

<script type="text/javascript">

document.write("<a href='../index.htm#14'><img name='Image14' border=0 src='../images/(1014).jpg' alt='(1014)'><br>");

var i = new Image();
i.onload=function(){document.images['Image14'].width=Math.min(this.width, 680)}
i.src = "../images/(1014).jpg";

</script>Couldn't you write the size of each image into the tag with PHP?

[vpguy]

What's the URL of the page which has the javascript code that writes the image (I think the URL above has the hard-coded version)? I can probably get it working. If you don't have it online yet, just name it something like test123.html and post the link here or PM me with it.

[osu9400]

vpguy-

Here is the source. All of the %ABC% items are PhotoShop macros that get populated when I build the gallery. http://www.gentryfoto.com/test/SubPage.txt

Here is one of the sample outputs:
http://www.gentryfoto.com/test/pages/(1008)test.htm

The original problem still exists. The page loads but the image does not. The image will load when I refresh the page. So, make sure your cache is clear.

Thanks for your offer to help!


What's the URL of the page which has the javascript code that writes the image (I think the URL above has the hard-coded version)? I can probably get it working. If you don't have it online yet, just name it something like test123.html and post the link here or PM me with it.

[osu9400]

Here is the code to dynamically size the width of the image. Now, how can I add the ALT and HREF info to the image?!?!?


<div id="photocontainer"></div>
<script type="text/javascript">
i=new Image();
i.onload=function(){
var scaleRatio=i.height/i.width;
var w=Math.min(i.width, 680);
var h=w*scaleRatio;
i.height=h;
i.width=w;
var e=document.getElementById("photocontainer");
if(!e)return;
while(e.firstChild)e.removeChild(e.firstChild) //clear contents
e.appendChild(i);
}
i.src="%IMAGESRC%";
i.onclick
</script>