JavaScript Preloader in Modal Div from HTML Table concatenates to new img URL

This code is meant for a real estate website I am updating for my company. Basically, There is a table with the property name, address, etc, and an image. Originally, I was coding this website in ASP.net switch over to regular Javascript for a few reasons (hosting overhead etc).

Sections of this code are from a few different tutorials out there, one of which is an ASP.net modal div image "enlarger" tutorial, which is sort of the basis combined with a few other sites. I have yet to comment in their names etc, but I plan on giving them credit in the code. Thier links are below before I post my code.

---

http://archive.aspsnippets.com/post/2009/07/06/Image-Gallery-using-ASPNet-GridView-control.aspx

---

My code is essentially as follows (I will trim the fat and excess line breaks in the style section):

First are the modal style tags from that tutorial by Mudassar Khan (partially relevant):

<style>

    body {margin:0;padding:0;height:100%;}
    .modal {display: none;position: absolute;top: 0px;left: 0px;background-color:black;z-index:100;opacity: 0.8; filter: alpha(opacity=60);-moz-opacity:0.8;min-height: 100%;} 
    &#divImage{display: none;z-index: 1000;position: fixed;top: 0;left: 0;background-color:White;height: 550px;width: 600px;padding: 3px;border: solid 1px black;} 
  <style>
Then comes his script, which I may have tweaked here and there:


<script type="text/javascript">

        function LoadDiv(url) {

            var img = new Image();
            var bcgDiv = document.getElementById("divBackground");
            var imgDiv = document.getElementById("divImage");
            var imgFull = document.getElementById("imgFull");
            var imgLoader = document.getElementById("imgLoader");

   img.src = url;
   var tcopy = img.src.slice(0,(img.src.length-4)) + "_big.png";
   img.src = tcopy;

            img.onload = function () {
                imgFull.src = tcopy
                imgFull.style.display = "block";
                imgLoader.style.display = "none";
            };

            var width = document.body.clientWidth;
            if (document.body.clientHeight > document.body.scrollHeight) {
                bcgDiv.style.height = document.body.clientHeight + "px";
            }
            else {
                bcgDiv.style.height = document.body.scrollHeight + "px";
            }

            im开发者_JAVA百科gDiv.style.left = (width - 650) / 2 + "px";
            imgDiv.style.top = "20px";
            bcgDiv.style.width = "100%";
            bcgDiv.style.display = "block";
            imgDiv.style.display = "block";
            return false;
        }
        function HideDiv() {
            var bcgDiv = document.getElementById("divBackground");
            var imgDiv = document.getElementById("divImage");
            var imgFull = document.getElementById("imgFull");

            imgLoader.style.display = "block"; // I added as it seems to bring back the loader gif

            if (bcgDiv != null) {
                bcgDiv.style.display = "none";
                imgDiv.style.display = "none";
                imgFull.style.display = "none";
            }
        } 
</script> 

Now All this above script gets called upon a onClick Event Handler on an image of each of the real estate companies properties. This will work well to both preload images with the little animated gif and the close button works fine. It works on more than one image, BUT if the image is already preloaded, I cant think of a way to force the redisplay of an already preloaded image if a user clicks on the photo, then clicks close to hide the div tag and then clicks on the same preloaded image.

That event handler looks like this:

img onClick="return LoadDiv(this.src);" src="http://www.ourcompany.com/images/prop_thumbs/Some_plaza.png" style="min-width:200 px;max-height:150 px;max-width:200 px;"

I thought global booleans would work, but then I realized, theres no telling which and what is preloaded, so the boolean might not help if you can't pass something meaningful back and forth.

I'm not asking any one to do my work for me, however I would appreciate suggestions in the right direction.

Regards and TIA!

---

You could make a array of all of the images with key values of loaded. For instance.

image_list = {image1:false,image2:true,image3:false};

true and false being loaded or not loaded. When an image is clicked just update the array.

image_list[image1] = true;

• Did this really quick, so my syntax might be off, feel free to correct me or berate me...

---

Yay!!! Figured it out with the help of both jhanifen and the guy who did the tutorial I used (he actually emailed me). My code is below (its an excerpt, but you'll get the idea):

    images = new Array(30);

//need to define each image to be in array

    images[0]="website/images/prop_thumbs/property1_big.png";
    images[1]="website/images/prop_thumbs/property2_big.png";
    images[2]="website/images/prop_thumbs/property3_big.png";

//This continues for some time

    imagesLoaded = new Array(30);

// per stack overflow person suggestion make array of bool values; initialize them all to false on page load

function onLoadScript() { for (i = 0; i < imagesLoaded.length; ++ i) { imagesLoaded [i] = false; } } // the above is called onLoad in body tag

// Changes the script for Loading the Div tag are below:

function LoadDiv(imgNum) {

 var img = new Image();
 var bcgDiv = document.getElementById("divBackground");
 var imgDiv = document.getElementById("divImage");
 var imgFull = document.getElementById("imgFull");
 var imgLoader = document.getElementById("imgLoader");

 img.src = images[imgNum];

if(imagesLoaded[imgNum] = true)
{ // this statement triggers same as onload below!

            imgFull.src = img.src
            imgFull.style.display = "block";
            imgLoader.style.display = "none";   

}

        img.onload = function () {

            imgFull.src = img.src
            imgFull.style.display = "block";
            imgLoader.style.display = "none";
            imagesLoaded[imgNum] = true;
        };

The rest of the document is the same except I changed the onClick event handler for the property images to LoadDiv(and some sequential number);

Thanks to all for your help! Particular props to both Mudassar Khan and jhanifen!