Question

我在使用$ .ajax（）检查文件是否存在时遇到问题。我循环使用$ .each的json文件，我想查看指定的工作人员是否有图像，如果不使用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需要这个，归功于Nick Craver）

由于此方法使用异步回调（.ajax()），因此您需要在事件处理程序中调用.append()。

使用$ .ajax（）问题检查文件是否存在

1 个答案: