Question

I know my problem is the fact that I can’t check if the image is good until it has time to load. I’m trying to check width and return after it or the src changes (using onerror to set an src.) I’m always getting stuck with a race condition though, and it errors out long before the height and width or src change. When I reload, the image is cached and it works fine. I don’t know how to avoid this. Here is my current code (also not working, it loops until Firefox complains.) I’m setting the return of this function to a variable. There are some writes in there I’m using to see how far it gets, and it stops in the while loop. I tried using getTimeout('tstit = chkload("thisisatest",tinypth);',250);, but that didn’t work either. I wish I could force this to load in order…

function buildimg(tehname,myc,pth1,pth2,tinypth)
{
var myimg = pth1+tehname+"/"+tehname+"-"+myc+".jpg";
buildtest("thisisatest",myimg,tinypth);
var testimg = document.getElementById("thisisatest");
var tstit = chkload("thisisatest",tinypth);
while(tstit == false) {
      document.write(tstit);
      tstit = chkload("thisisatest",tinypth);
    }
alert(testimg.src+'-'+testimg.width+'-'+testimg.height);
if((testimage.width > 20) && (testimage.height > 20)) {
       return myimg;
    }
else if(typeof pth2 == "undefined") {
        myimg = "error";
        return myimg;
    }
else {
        myimg = buildimg(tehname,myc,pth2);
        return myimg;
    }
    
document.write('No return error in buildimg.');
return "error";
}

/*Builds a hidden img tag for testing images*/
function buildtest(itsid,itssrc,tinypath) {

 if(document.getElementById(itsid)) {
    var imgobj = document.getElementById(itsid);
    imgobj.remove();
    }
document.write('<img id="'+itsid+'" style="display: none;" src="'+itssrc+'" onerror="swaponerr(\''+itsid+'\',\''+tinypath+'\')"  />');
}

/*Swaps the image to a small picture, so we can detect if it worked*/
function swaponerr(tagid, tinypath) {
    var theimg = document.getElementById(tagid);
    theimg.onerror = '';
    theimg.src = tinypath;
}

/*Recurses to return when the image is loaded*/
function chkload(loadid,tinychk) {
var tehobj = document.getElementById(loadid);
document.write(tehobj.width+'x'+tehobj.height+'x'+tehobj.src);
if((tehobj.naturalWidth > 20) && (tehobj.naturalHeight > 20)) {
    return true;
    }
if(tehobj.src == tinychk) {
    return true;
    }
return false;
}

I need to test for an image, and return error if it is non-existent. The code below works fine on my server:

/*Checks if the image at /tehname/tehname-c.jpg exists in either of the paths
outputs it's address if it does, and "error" if not.*/
function buildimg(tehname,index,pth1,pth2)
{
var myimg = pth1+tehname+"/"+tehname+"-"+index+".jpg";
$.ajax({
url:myimg,
type:'HEAD',
error: function()
{
    myimg=pth2+tehname+"/"+tehname+"-"+index+".jpg";     
    $.ajax({
        url:myimg,
        type:'HEAD',
        error: function()
            {
            myimg="error";
            return;
        },
    });     
    return;
},
});
return myimg;
}

Unfortunately, I’m trying to do this on a messed up system my work uses. We do have jquery, but the system stores user files on a separate server from code, so ajax won’t work. This will eventually be in a .js file, I hope.

Now I’ve got code starting with:

function buildimg(tehname,myc,pth1,pth2)
{
  var myimg = pth1+tehname+"/"+tehname+"-"+myc+".jpg";
  var tehimage = new Image();
  tehimg.src = myimg;

I tried to have the function load the image, and check its width, but I always get 0, since I can’t pre-load the images without knowing how many they are (and I don’t want to have some outrageously high number of requests with most being errors.) For some reason (at least on Firefox 4, as that’s what my goal is to get working first) tehimage.complete always returns false. I’ve tried using onerror and onload by a global variable, and a few other methods. I must admit though, I’m not very versed in Javascript, so my callbacks may not have worked.

Please help, I’m getting desperate!

Answer 1

Since I’m getting no answers, I’m closing the question. What I ended up doing was a modification to make the image change class in the onload, have the image onerror delete it, and have the rest of the code run in the window onload. Unfortunately, this means the 404s aren’t caught before it tries to load more images, so I’m forced to limit the max number of images that can be used (changeable in the function call,) and the images that aren’t there just waste a little time.

See the final result here.