Question

编辑：我知道我的问题是我无法检查图像是否有效，直到它有时间加载。我正在尝试检查宽度并在它或src更改后返回（使用onerror来设置src。）我总是遇到竞争条件，并且它在高度和宽度或src更改之前很久就会出错。当我重新加载时，图像被缓存，它工作正常。我不知道如何避免这种情况。这是我当前的代码（也没有工作，它会循环直到firefox抱怨。）我将此函数的返回值设置为变量。在那里有一些写入我正在使用它来查看它有多远，并且它在while循环中停止。我尝试使用getTimeout（'tstit = chkload（“thisisatest”，tinypth）;'，250）;,但这也不起作用。我希望我可以强行按顺序加载...

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;
}

我需要测试图像，如果不存在则返回错误。以下代码在我的服务器上正常工作：

/*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;
}

不幸的是，我正在尝试在我的工作使用的混乱系统上执行此操作。我们确实有jquery，但是系统将用户文件存储在与代码不同的服务器上，因此ajax不起作用。我希望这最终会出现在.js文件中。

现在我的代码开头是：

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

我试图让函数加载图像，并检查它的宽度，但我总是得到0，因为我不能预先加载图像而不知道它们有多少（我不想有一些由于某种原因（至少在ff4上，因为我的目标是首先工作），tehimage.complete总是返回false。我试过通过全局变量和一些其他方法使用onerror和onload。我必须承认，我不是很精通javascript，所以我的回调可能没有用。

请帮助，我变得绝望！

谢谢，特鲁克

Answer 1

你是否在该用户文件服务器上持有“执行php代码的权力”？如果是这样，在php中检查它们并输出到该服务器中的images.js，而不是在你的html中，首先加载images.js，然后是你常用的javascript。顺便说一句，jQuery在ajax中有内存泄漏的耳朵，不知道1.6，但1.5肯定有那些。如果你不想使用ajax从服务器获取数据到javascript - 使用普通的javascript：http://www.w3schools.com/ajax/ajax_xmlhttprequest_send.asp

编辑：绝对值得一试：http://fettig.net/weblog/2005/11/28/how-to-make-xmlhttprequest-connections-to-another-server-in-your-domain/

Answer 2

由于我没有得到答案，我正在结束这个问题。我最终做的是修改在onload中使图像更改类，让图像错误删除它，并让其余的代码在窗口中运行。不幸的是，这意味着404s在尝试加载更多图像之前没有被捕获，因此我不得不限制可以使用的图像的最大数量（在函数调用中可更改）和不存在的图像只是浪费了一点时间。

查看最终结果here.

图像的返回地址或错误（如果不存在）

2 个答案: