输出 AJAX 交付内容时的“无图像”图标 [重复]

Question

我使用 AJAX 请求从 mySQL (link) 中检索数据，然后构建一系列帖子。每个帖子都有一张特色图片。因此，在输出帖子的过程中，访问者会看到“无图像”标志：

。

这会持续一秒钟，但看起来很糟糕。

我怎样才能防止这个标志出现，或者用加载旋转代替？

用于输出结果的jQuery部分

function postsBuilder(posts){
var contents ='';
$.each(posts, function(k, field){
    if(field.link[field.link.length-1] == '/') {field.link = field.link.slice(0, field.link.length-1)};
    contents += '<div class="post-container">';
//here I output the feature image
    contents += "<div class='col_1'><div class='post_image'><img src='/images/icons/id_" + field.id + ".png'></div></div>";
    contents += "<div class='col_2'><div class='post_name'><a class='post_name_link' target='blank' href=http://" + field.link + ">" + field.name + "</a></div>";
    contents += "<div class='post_link'>" + field.link + "</div>";
    contents += "<div class='post_content'>Content: " + field.content + "</div>";
    if ( field.video.indexOf('you') >-1 )  {contents += "<div class='post_video'><a data-toggle='lightbox' href=" + field.video + ">Video</a></div>";}
        contents += "</div></div><br />";         
});
return contents;    

}

函数被调用的例子之一

$.ajax({cache:false,
               url:str,
               beforeSend: function() { $('#loadingDiv').show(); },
               complete: function() { $('#loadingDiv').hide(); },
               dataType :'json'})
               .done(function(result){
                  var i, j, m=0;
                  var div_content="";
                  div_content += "<div><b>Category: ".concat(result[0].category).concat("</b></div>");
                  posts_array = [];
                  for (i=0,j=result.length; i<j; i+=size) { // slice whole JSON result into portions of at maximum 'size' posts in each
                    posts_array.push(result.slice(i, i+size)); 
                    m++;            
                  }
                  div_content += postsBuilder(posts_array[0]);
                    ...
                  $("#content").html(div_content);              
               });

Answer 1

对图像使用错误事件：

$(document).on('error', 'img', function () { 
    $(this).hide();
    // or $(this).css({visibility:"hidden"}); 
});

查看How to silently hide "Image not found" icon when src source image is not found