Hi there, I don't know even how to call this problem I'm encountering. The scenario is: in the Body there is an empty div called "ImagesContainer". onload of the body I call function that populate the container with images. the symptom: when the page is first time accessed or when "Temporary.." files are deleted the images are mispositioned. after F5(refresh) the Images get set in their correct position. this symptom doesn't occur when page is accessed the second time. Why is that happening? in my code i use a fade in/out functions i built for smooth transition between pictures. and the code for the test.aspx is: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="test" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script type="text/javascript" language="javascript"> var ImagesArray = <%= Session["ImageList"]%>.split(";"); var ProdImage = new Array(ImagesArray.length); var iCurImage = 0; var iPrevImage = 0; function bodyOnLoad() { CreateImagesWithFadeIn(); } function CreateImagesWithFadeIn() { DivImagesContainer = document.getElementById("ImagesContainer"); LoadingImage = document.createElement('img'); LoadingImage.id="LoadingImage"; LoadingImage.src = "Images/loading.gif"; LoadingImage.style.position = 'absolute'; ProdImage[0] = new Image(); ProdImage[0].src = ImagesArray[0]; DivImagesContainer.style.height = ProdImage[0].height+'px'; DivImagesContainer.style.width = ProdImage[0].width+'px'; DivImagesContainer.style.position = 'relative'; LoadingImage.style.top = ((ProdImage[0].height / 2)-(LoadingImage.height/2))+'px'; LoadingImage.style.left = ((ProdImage[0].width /2)-(LoadingImage.width/2))+'px'; LoadingImage.style.zIndex = 3; DivImagesContainer.appendChild(LoadingImage); ProdImage[0].style.zIndex = 2; ProdImage[0].id = "ProdImage0"; ProdImage[0].style.position = 'absolute'; DivImagesContainer.appendChild(ProdImage[0]); FadeIn(1,ProdImage[0]); } function FadeIn(ia, imgObj) { imgObj.style.filter = 'alpha(opacity=' + ia + ')'; imgObj.style.opacity = ia / 100; ia += 5; if (ia < 100) setTimeout(function(){FadeIn(ia,imgObj)}, 1); else{ imgObj.style.filter = "alpha(opacity=100)"; imgObj.style.opacity = 1; document.getElementById("LoadingImage").style.zIndex=0; for (i=1;i<ImagesArray.length;i++){ ProdImage[i] = document.createElement('img'); ProdImage[i].src = ImagesArray[i]; ProdImage[i].style.zIndex = 1; ProdImage[i].id = "ProdImage"+i; ProdImage[i].style.position = 'absolute'; DivImagesContainer.appendChild(ProdImage[i]); } } } function ButtonNextClick(){ ProdImage[iCurImage].style.zIndex = 3; iPrevImage = iCurImage; ProdImage[++iCurImage].style.zIndex = 2; //document.getElementById("ImageProd").src=ImagesArray[++iCurImage]; if (document.getElementById("ButtonPrevImage").onclick == null) { document.getElementById("ButtonPrevImage").onclick = ButtonPrevClick; document.getElementById("ButtonPrevImage").style.color = ""; document.getElementById("ButtonPrevImage").style.textDecoration = ""; document.getElementById("ButtonPrevImage").style.cursor = "pointer"; } if ((iCurImage+1) == ImagesArray.length) { document.getElementById("ButtonNextImage").onclick = null; document.getElementById("ButtonNextImage").style.color = "Gray"; document.getElementById("ButtonNextImage").style.textDecoration = "none"; document.getElementById("ButtonNextImage").style.cursor = "default"; } FadeOut(99,ProdImage[iCurImage-1]); } function ButtonPrevClick(){ ProdImage[iCurImage].style.zIndex = 3; iPrevImage = iCurImage; ProdImage[--iCurImage].style.zIndex = 2; //document.getElementById("ImageProd").src=ImagesArray[++iCurImage]; if (document.getElementById("ButtonNextImage").onclick == null) { document.getElementById("ButtonNextImage").onclick = ButtonNextClick; document.getElementById("ButtonNextImage").style.color = ""; document.getElementById("ButtonNextImage").style.textDecoration = ""; document.getElementById("ButtonNextImage").style.cursor = "pointer"; } if (iCurImage == 0) { document.getElementById("ButtonPrevImage").onclick = null; document.getElementById("ButtonPrevImage").style.color = "Gray"; document.getElementById("ButtonPrevImage").style.textDecoration = "none"; document.getElementById("ButtonPrevImage").style.cursor = "default"; } FadeOut(99,ProdImage[iCurImage+1]); } function FadeOut(ia, imgObj) { imgObj.style.filter = "alpha(opacity=" + ia + ")"; imgObj.style.opacity = ia / 100; ia -= 5; if (ia > 0) setTimeout(function() { FadeOut(ia, imgObj) }, 1); else{ imgObj.style.filter = "alpha(opacity=0)"; imgObj.style.opacity = 0; ProdImage[iPrevImage].style.zIndex = 1; ProdImage[iCurImage].style.zIndex = 2; //the next line is actually a refer. to ProdImage[iPrevImage] imgObj.style.filter = "alpha(opacity=100)"; imgObj.style.opacity = 1; } } </script> </head> <body style="position:relative" onload="bodyOnLoad()"> <form id="form1" runat="server"> <table> <tr > <td style="width:200px;"> menu goes here. </td> <td style="padding-top:30px"> <div id="ImagesContainer"></div> </td> <td valign="bottom"> <div style="display:inline-block"> Some dynamic text goes here <input type="button" value="prev" onclick="ButtonPrevClick()" /> <input type="button" value="next" onclick="ButtonNextClick()" /> </div> </td> </tr> </table> </form> </body> </html> Code (markup): --------------------------------------------- and the code for the test.aspx.cs is: --------------------------------------------- using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.IO; public partial class test : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { string temp = GetFolderImages(); Session["ImageList"] = temp; } public string GetFolderImages() { string sImagesList = ""; try { string ImagePathL = Server.MapPath("Images/").ToString(); if (Directory.Exists(ImagePathL)) { DirectoryInfo di = new DirectoryInfo(ImagePathL); FileInfo[] rgFiles = di.GetFiles("bench*.jpg"); foreach (FileInfo fi in rgFiles) { sImagesList = sImagesList + "Images/" + fi.Name + ";"; } } } catch { } return "'" + sImagesList.Substring(0, sImagesList.Length - 1) + "'"; } } Code (markup): i wanted to place a link to the screen shots - but i can't post links. so just copy the link to view the screen shot. this screen shot is the first time the page is accessed: http://eranbo.110mb.com/beforeF5.jpg this screen shot is the after F5 is pressed or the second and more time the page is accessed: http://eranbo.110mb.com/afterF5.jpg
erm. you know you can't read the image width/height until AFTER it has been loaded into the dom - the property is just not set, right? i would recommend you use an image preloader, such as this one i wrote a while back: http://fragged.org/preloading-images-using-javascript-the-right-way-and-without-frameworks_744.html
Hi Dim, thanks for the reply. well, i didn't knew it. but i guess it's working. the debugger shoew the correct values of the image even before appendChild(). I used the var x = new image(); instead of createElement('img'); Eran.
I KNOW, i refuse to nstall ie8 to test with it - doing a new skin for it atm - will update. the important thing is the test case page: http://fragged.org/dev/preloading-images-via-javascript.php look at the source - and yes, it uses new Image() through the constructor.