2010-11-10 65 views
2

我需要一些javascript/jquery的幫助,我已經落實到位。這個客戶端腳本的功能是設置一個頁面上的特定選擇器中的所有圖像的事件處理程序,如果圖像沒有加載(例如找不到),則刪除它。我的客戶端腳本如下所示,在外部JavaScript文件的document.ready中觸發。幫助需要綁定的jquery .error()

$('.imagecontainer').error(function() { ($this).parent().hide(); }); 

這有效,有時候!有時,當頁面加載時,它可以正常工作,但對於某些圖像而言,它可以正常工作的時間更長,但大部分時間它根本無法工作。如果圖片不加載,它會做什麼,周圍的錨點標記即。圖像父項被隱藏。我在函數中包含了警報,以檢查它何時被調用,並且它在某個時間但不是所有時間都被觸發。

所以我想知道我哪裏出錯了。圖像的路徑/ src由C#在服務器端代碼中設置,因爲路徑是在服務器端派生的,無法更改。

有關於此的任何提示或想法?我在某處讀到這個事件應該在圖像源設置之前被綁定,但不確定這是否可以實現,因爲在服務器端設置了圖像源。

一旦我解決了這個問題(希望),我還有一個問題。某些圖像是由用戶操作動態加載的,並且在運行時不會顯示在頁面上。我已經通過使用jQuery語法.live('click',function)等方式解決了99%的事件。有沒有人知道我能否做類似於.error或者我可以如何設置它。

+0

tldr ....................................:P – mkoryak 2010-11-10 21:45:00

回答

1

有幾件事值得注意:

您的代碼段存在語法錯誤。您有($this).parent().hide();而不是$(this).parent().hide();

查看.error()文檔。具體來說,我注意到了兩件事。首先是觀察如果您在本地運行,呼叫可能無法正常工作。其次,在評論中,有人觀察到以下情況:

它使用onerror回調。此 回調僅針對img標籤定義。 某些瀏覽器(IE,FF,...)也支持在其他對象上回調此 。這是 偉大的全球錯誤捕獲 系統(window.onerror)。這 行爲不符合標準。 WebKit例如不會觸發這個 回調!

基於您提供的小片段,它看起來像您可能針對的是包含圖像的元素,而不是圖像本身。這很可能是你問題的根源。

+0

恩德,感謝您的協助。我將語法改爲$('。imagecontainer')。find('img')。error(function(){$(this).parent()。hide();});我也在網絡服務器上嘗試過,並且沒有任何改變 - 有時會起作用。有趣的是,如果我在回調函數中包含一個警報,它可以正常工作。它就像減慢了頁面加載,以便在所有圖像上設置事件。任何人有任何其他的想法,我可以如何糾正這一點? – amateur 2010-11-11 16:57:37

0

我找到了解決我的問題的方法。它如下所示:

如果dom load事件在img錯誤事件之前觸發,我的上述方法不起作用。所以我不得不更改我的代碼以等待window.onload事件觸發,然後檢查是否有任何圖像被破壞。

$(window).bind('load', function() { 
     $('.imagecontainer').find('img').each(function() { 
      if ((typeof this.naturalWidth != "undefined" && this.naturalWidth == 0) || this.readyState == 'uninitialized') { 
       // Image not available 
       $(this).parent().hide(); 
      } 
     }); 
    }); 

這似乎很好地訣竅。

但是我有一個問題。如果圖像是動態加載的,例如。在模式彈出窗口或通過jQuery Ajax調用,它不起作用。我通過使用.live()爲我的jQuery解決了這個問題。有沒有將.live()函數合併到上面的方法?或者處理動態加載的圖像的替代方法。