每個函數都沒有執行刪除不活動的圖像

我使用每個函數來檢查數字標籤中的外部圖像是否'活'，如果不是，它應該完全刪除圖形容器，否則它應該附加img作爲背景並刪除圖像標籤本身。一般來說，最後的任務是正確的，但不這樣做去除一部分時，圖像不是活着每個函數都沒有執行刪除不活動的圖像

$("figure img").each(function() { 
    $(this).error(function() { 
     $(this).parent().remove(); 
    }); 
}); 

$("figure img").each(function() { 
    var source = $(this).attr("src"); 
    $(this).closest("figure").css("background-image", "url(" + source + ")"); 
    $(this).remove(); 
});

http://jsfiddle.net/skiweather/sL3hhhct/

來源

2014-11-02 mark

問題的兩種各功能有點多餘？ – mark 2014-11-02 07:39:26

.error()已過時，所以你不應該使用它。改爲使用.on("error")。

您的代碼存在的問題是.error()是一個事件處理程序，因此它是異步運行的。但是您的第二個.each()同步運行，因此它將在調用.error()代碼之前刪除所有圖像。您應該將該塊放入load事件的處理程序中，以便在圖像加載成功時運行。

綁定事件處理程序時，您也不需要使用.each()。您可以直接將處理程序綁定到集合。

$("figure img").on({ 
    load: function() { 
     var source = $(this).attr("src"); 
     $(this).closest("figure").css("background-image", "url(" + source + ")"); 
     $(this).remove(); 
    }, 
    error: function() { 
     $(this).parent().remove(); 
    } 
});

DEMO

來源

2014-11-02 07:48:50 Barmar

圖像未附加爲背景。小提琴中的第一個圖像是應該與其父母一起移除的圖像（圖）。 – mark 2014-11-02 07:55:12

它在我的小提琴中起作用。您需要在'document.ready（）'處理程序中運行代碼，而不是'window.onload'，因爲'onload'在加載完畢後運行，並且錯誤已經發生。 – Barmar 2014-11-02 08:03:26

這是所有關於定時。如果爲了響應適當的瀏覽器事件而運行，您的代碼將起作用（注意複數形式）。

文件準備：連接錯誤處理程序的img元素
文件加載：設置BG圖像等

$(document).ready(function() { 
    $("figure img").each(function() { 
     $(this).on('error', function() { 
      $(this).parent().remove(); 
     }); 
    }); 
}); 

$(document).load(function() { 
    $("figure img").each(function() { 
     var source = $(this).attr("src"); 
     $(this).closest("figure").css("background-image", "url(" + source + ")"); 
     $(this).remove(); 
    }); 
});

DEMO

注意，小提琴設置「沒有包裹在頭」選項

但它也許更清晰的設置下，文件準備好了一切，並附加既是「錯誤」和「負荷」處理的圖像：

$(document).ready(function() { 
    $("figure img").each(function() { 
     var $that = $(this); 
     $that.on({ 
      'error': function() { 
       $that.parent().remove(); 
      }, 
      'load': function() { 
       var source = $that.attr("src"); 
       $that.closest("figure").css("background-image", "url(" + source + ")"); 
       $that.remove(); 
      } 
     }); 
    }); 
});

DEMO

來源

2014-11-02 08:08:01

每個函數都沒有執行刪除不活動的圖像

回答

相關問題