Блог

Я знаю, что моя проблема заключается в том, что я не могу проверить, исправно ли изображение, пока у него нет времени для загрузки. Я пытаюсь проверить ширину и вернуться после нее или изменения 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) amp;amp; (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) amp;amp; (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, но система хранит пользовательские файлы на отдельном сервере от code, поэтому ajax не будет работать. Я надеюсь, что в конечном итоге это будет в файле .js.

Теперь у меня есть код, начинающийся с:

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

Я пытался заставить функцию загрузить изображение и проверить его ширину, но я всегда получаю 0, поскольку я не могу предварительно загрузить изображения, не зная, сколько их (и я не хочу получать возмутительно большое количество запросов, большинство из которых являются ошибками.) По какой-то причине (по крайней мере, в Firefox 4, поскольку это то, что моя цель — начать работать в первую очередь) tehimage.complete всегда возвращает false . Я пробовал использовать onerror и onload с помощью глобальной переменной и нескольких других методов. Однако я должен признать, что я не очень разбираюсь в Javascript, поэтому мои обратные вызовы, возможно, не сработали.

Пожалуйста, помогите, я в отчаянии!

Есть ли у вас «возможность выполнять php-код» на этом сервере пользовательских файлов? Если это так, проверьте их в php и выведите на images.js на этом сервере, чем в вашем html, сначала загружается images.js , тогда ваш обычный javascript. Кстати, у jQuery были утечки памяти в ajax for ears, не знаю насчет 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/

Поскольку я не получаю ответов, я закрываю вопрос. В итоге я внес модификацию, чтобы изменить класс image при загрузке, удалить его при ошибке image и запустить остальной код в окне onload. К сожалению, это означает, что 404-е не перехватываются до того, как он попытается загрузить больше изображений, поэтому я вынужден ограничить максимальное количество изображений, которые могут быть использованы (изменяемые при вызове функции), а изображения, которых там нет, просто тратят немного времени.

Смотрите окончательный результат здесь.