Results 1 to 2 of 2

Thread: Ajax javascript test if image file exists

  1. #1
    Join Date
    Feb 2006
    Posts
    230
    Thanks
    8
    Thanked 3 Times in 3 Posts

    Default Ajax javascript test if image file exists

    Hi All, I need the help of a real expert. I'm still having difficulty with this Ajax technique. I have posted before about this, but no replies (sigh). The script below works with FF only when the alert is in the code, and doesn't work at all in IE. Of the numerous posts on the net about doing this, none seem to work at all. I believe that the IE portion of the problem has to do with the req.readyState or req.status, maybe. But in FF, why is the alert necessary for the req.readystatechange to work? Or, what else is the alert doing that I need to do? Oh, by the way, if I just go ahead and don't do anything at all, then it displays all of the existing links fine and just inserts 'X' for missing images when they don't exist, which is roughly 60% of the time, so that's not an acceptable approach, specially if the first several are the missing ones. My code is this:
    HTML Code:
    last part of main function call:
    // Correct imagelink array for any missing elements //
    for (m=imagetotl-1;m>=3;m--) {
    	testExists(imagelink[m]); 
    	alert("test");             
    	if(nB) {
    		imagetotl--;
    			for (n=m;n<=imagetotl+1;n++) {
    				imagelink[n]=imagelink[n+1];
    			}
    	}
    }
    // Seed the starting image sequence //
    document.pic.src=imagelink[0];
    break;
    }
    }
    }
    }
    
    function testExists(imagepath) {
        req = getreq();
        req.onreadystatechange = imagexists;
        req.open("head", imagepath, true);
        req.send(null);     
    }
    
    function imagexists() {
        if(req.readyState == 4) {
            if(req.status == 200)
            {
                // image exists
                nB=false;
            }
            else
            {
                // image doesn't exist
                nB=true;
            }
        }
    }
     
    function getreq() { // returns false if exists
    	if(window.ActiveXObject) { // if IE
    		try {
    		return new ActiveXObject("Msxml2.XMLHTTP");
    	} catch(e) {
    		try {
    		return new ActiveXObject("Microsoft.XMLHTTP");
    		} catch(e) {
    		return;
    			}
    		}
    	} else if(window.XMLHttpRequest) { // if Mozilla, Safari, etc.
    		return new XMLHttpRequest();
    		}
    }

  2. #2
    Join Date
    Feb 2006
    Posts
    230
    Thanks
    8
    Thanked 3 Times in 3 Posts

    Default

    I found the problem with the help on someone on another forum, but I know that this solution will be used by others, so I wanted to post the solution here. The problem is that I had used:
    Code:
    function testExists(imagepath) {
        req = getreq();
        req.onreadystatechange = imagexists;
        req.open("head", imagepath, true);
        req.send(null);     
    }
    and it must be:
    Code:
    function testExists(imagepath) {
        req = getreq();
        req.onreadystatechange = imagexists;
        req.open("head", imagepath, false);
        req.send(null);     
    }
    because when it is true (asynchronously), processing continues and req.send(null); does not wait for a response.....so the boolean is not set.

    The final correct code is here:
    Code:
    last part of main function call:
    // collapse imagelink array removing missing elements //
    for (m=imagetotl-1;m>=3;m--) {
    	testExists(imagelink[m]);          
    	if(nB) {
    		imagetotl--;
    			for (n=m;n<=imagetotl+1;n++) {
    				imagelink[n]=imagelink[n+1];
    			}
    	}
    }
    // Seed the starting image sequence //
    document.pic.src=imagelink[0];
    break;
    }
    }
    }
    }
    
    function testExists(imagepath) {
        req = getreq();
        req.onreadystatechange = imagexists;
        req.open("head", imagepath, false);
        req.send(null);     
    }
    
    function imagexists() {
        if(req.readyState == 4) {
            if(req.status == 200)
            {
                // image exists
                nB=false;
            }
            else
            {
                // image doesn't exist
                nB=true;
            }
        }
    }
     
    function getreq() { // returns false if exists
    	if(window.ActiveXObject) { // if IE
    		try {
    		return new ActiveXObject("Msxml2.XMLHTTP");
    	} catch(e) {
    		try {
    		return new ActiveXObject("Microsoft.XMLHTTP");
    		} catch(e) {
    		return;
    			}
    		}
    	} else if(window.XMLHttpRequest) { // if Mozilla, Safari, etc.
    		return new XMLHttpRequest();
    		}
    }

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •