若跌破

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