Question

我在页面上使用大量图像加载到DOM中，例如

html += '<img src="'+image.preview+'" title="View larger image" alt="'+image.item_title+'" height="'+image.display_height+'" width="'+image.display_width+'">';

数据来自ajax调用，位于FOR循环中，每个映像一个。我有两个图像引用，以防一个被打破image.preview和image.preview2（我使用两个作为image.preview是本地的，但如果出现错误，那么image.preview2是原始图像）

如果image.preview被破坏，我想切换到image.preview2

我正在尝试以下但不确定放在哪里？

$('img').on('error', function() { this.src = image.preview2; });

我已经在html +=之前尝试过，但是在中间似乎没有任何效果 - 任何想法？

Answer 1

如果preview2图片来源适用于不同的每张图片，那么我建议您在for循环内进行此操作：

for(n in images) {
    var image = images[n];

    // create jQuery object (is not in the DOM jet)
    $img = $('<img title="View larger image" alt="' + image.item_title + '" height="' + image.display_height + '" width="' + image.display_width + '">');

    // is there an preview src?
    if(typeof image.preview == 'Undefined' || image.preview == '') { //nopes
        $img.attr('src', image.preview2);
    } else { //yes
        $img.attr('src', image.preview);
    }

    // add the image to the DOM
    $('#id_of_element').append($img);
}

Answer 2

你可以这样做：

var newImg = $('<img src="'+image.preview+'" title="View larger image" alt="'+image.item_title+'" height="'+image.display_height+'" width="'+image.display_width+'">');
newImg.on('error', function() { this.src = image.preview2; }); 

and then

<the html container>.append(newImg);

这将确保您的图像在添加到dom并获取之前具有所有设置。

Answer 3

示例：

function setDefaultImage(img)
{
  img.src = "images/candidates/human.jpg";
}

希望这会对你有帮助..

在你的场景中
..

html += '<img src="'+image.preview+'" title="View larger image" alt="'+image.item_title+'" height="'+image.display_height+'" width="'+image.display_width+'" onerror="'setDefaultImage(this)'">';

 function setDefaultImage(img)
    {
      img.src = "image.preview2";
    }

Answer 4

想出最简单的方法就是内联：

html += '<img src....onerror="this.onerror=null;this.src=\''+image.preview2+'\';">';

如果破坏，交换图像的位置

4 个答案: