若跌破

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

想通了最简单的WASY做到这一点是内联：

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

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

如果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 4

example:

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

希望这会帮助你。 。

in your scenario..

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"; 
    }