Question

如果用户的图像不存在，我想加载默认图像。我尝试了这个，但它没有用。

$('#avatar').load(function(){
    // ... loaded  
}).error(function(){
    // ... not loaded
    $(this).attr('src','/images2/no-avatar2.png');
});

任何人都知道我该怎么做？

有人用这个：

function loadDefault(f, ff) {
img = document.getElementById(f);
if(!img.complete) {
    img.src = ff;
}
if(typeof(img.naturalWidth) != "undefined" && img.naturalWidth == 0) {
    img.src = ff;
}
}

function init() {
setTimeout("loadDefault('side_avatar', '/images/default/avatar_player_profile.gif')", 100);
setTimeout("imageResize(740)", 100);
tooltip = new ToolTip();
tooltip.init('hoverBox', 'loading...');

}

我怎么能用这样的东西？

Answer 1

看起来您错过了加载网址作为load()功能的第一个参数。另外，如果没有看到您的HTML，我会假设#avatar是img标记，就像您在错误函数中使用它一样。我不认为你可以将HTML加载到img中，所以你可能最好不要像这样构建你的html和js：

HTML示例：

<div id="avatarDiv">
  <img id="avatar" src="" alt="" />
</div>

JS示例：

$('#avatarDiv').load('avatar.php', function() {
  // ... loaded
}).error(function() {
  // ... not loaded
  $('img#avatar').attr('src','/images2/no-avatar2.png');
});

然后确保您的avatar.php文件返回图像对象的完整html：

<img id="avatar" src="successful-avatar.jpg" alt="" />

文档：http://api.jquery.com/load/

Answer 2

我会尝试这样的事情：

$.get("get-avatar.php", function(response) {
    $("#avatar").attr('src', response);
}).error(function(response) {
    $(this).attr('src', '/images2/no-avatar2.png');
})

只要avatar.php在图像不存在时返回http错误消息。

Answer 3

此例程使用ajax查看图像文件是否存在：

HTML：

<img id='avatar' src='/images2/avatar2find.png' alt='No Image Available'></img>

脚本：

$(window).load(function() {
  var $img = $('#avatar');
  $.ajax({
    url: $img.attr('src'),
    type: 'get',
    statusCode: {
      404: function() {
      $img.attr('src', '/images2/no-avatar2.png');
      }
    },
    error:
      function() {
        // do something?
      }
  });
});

Javascript jQuery如何加载默认图像

3 个答案: