Проверка наличия файла с помощью проблемы $ .ajax ()

Question

У меня проблема с проверкой наличия файла с помощью $ .ajax ().Я перебираю json-файл с $ .each и хочу посмотреть, есть ли у указанного сотрудника изображение, и если нет, то использовать изображение no_photo.jpg.Я продолжаю получать изображение no_photo.jpg, хотя в каталоге есть изображение сотрудника.

Вот весь вызов $ .getJSON ().

$.getJSON('staff.json', function(data) {
                var last_check;
                var image_url = "no_photo";
              $.each(data.employees, function(i,employee){
                if ((i+1)%4==0) {last_check = " last";} else {last_check = "";}
                $.ajax({
                    url:'/images/staff/' + employee.first_name.toLowerCase() + employee.last_name.toLowerCase() + '.jpg',
                    type:'HEAD',
                    error:
                        function(){
                            image_url = "no_photo";
                        },
                    success:
                        function(){
                            image_url = employee.first_name.toLowerCase() + employee.last_name.toLowerCase();
                        }
                });
                $("div.staff-members").append('<a href="#" title="' + employee.first_name + ' ' + employee.last_name + ', ' + employee.title + '" rel="' + employee.location + '" class="' + employee.category + last_check + '"><img src="/images/staff/' + image_url + '.jpg"><span class="' + employee.category + '"></span></a>');
              });
            });

Answer 1

Я бы настоятельно рекомендовал , а не , чтобы использовать для этой цели метод jQuerys .ajax() (или любой другой XHR). Вместо этого используйте Javascripts Объект изображения.

var testimg = new Image();
testimg.onload = function(){
    if(this.width > 0)
       image_url = this.src;
    else
       image_url = "no_photo";

    $("div.staff-members").append('<a href="#" title="' + employee.first_name + ' ' + employee.last_name + ', ' + employee.title + '" rel="' + employee.location + '" class="' + employee.category + last_check + '"><img src="/images/staff/' + image_url + '.jpg"><span class="' + employee.category + '"></span></a>');
};
testimg.onerror = function(){
    image_url = "no_photo";
    $("div.staff-members").append('<a href="#" title="' + employee.first_name + ' ' + employee.last_name + ', ' + employee.title + '" rel="' + employee.location + '" class="' + employee.category + last_check + '"><img src="/images/staff/' + image_url + '.jpg"><span class="' + employee.category + '"></span></a>');
};
testimg.src = '/images/staff/' + employee.first_name.toLowerCase() + employee.last_name.toLowerCase() + '.jpg';

Это имеет меньше накладных расходов, чем Ajax request.

обновление

переместил инструкцию .src = вниз (для этого нужна msie, кредиты Ника Крейвера)

Поскольку этот подход использует асинхронные обратные вызовы (как и .ajax()), вам необходимо вызвать .append() в обработчиках событий.