jquery .one（）加載和錯誤事件不起作用

我有一個簡單的html，我想要一個事件觸發一次最後一個圖像加載，或者如果最後一個圖像加載時出現錯誤。這裏是我的代碼jquery .one（）加載和錯誤事件不起作用

HTML

<div id="compare-table-scrollable"> 
    <img src="www.bla.com/1.png" /> 
    <img src="www.bla.com/2.png" /> 
    <img src="www.bla.com/3.png" /> 
</div>

jQuery的

var imageCount = $('#compare-table-scrollable img').length; 
var counterIMG = 0; 
$('#compare-table-scrollable img').one("load error",function(){ 
      counterIMG++; 
      if (counterIMG == imageCount) // do stuff when all have loaded 
      { 
       alert(counterIMG); 
      } 
});

這裏是我的FIDDLE

來源

2013-09-30 user2636556

'load'事件不能可靠地與圖像一起工作。 [這是你可以做的事情]（http://stackoverflow.com/questions/3877027/jquery-callback-on-image-load-even-when-the-image-is-cached）。 – Blazemonger

@Blazemonger：'load' events ** do **可靠地與圖像一起工作。你只需要確保你在那裏抓住他們。如果你不是的話（如果你在鉤住事件之前設置了src），你可能會錯過它。這與事件不可靠是不一樣的。 –

@TJCrowder [jQuery開發人員熟知，如果圖像被緩存，瀏覽器的正常'load'事件可能根本不會被觸發。]（http://api.jquery.com/load-event/ ）你似乎在描述「在某些情況下可靠」，這根本不是我所認爲的「可靠」。 – Blazemonger

這裏有一個我寫我自己而回。這是非常相似，你有什麼上面，卻多了幾分穩健...

function onImagesLoaded($container, callback) { 
    var $images = $container.find("img"); 
    var imgCount = $images.length; 
    if (!imgCount) { 
     callback(); 
    } else { 
     $("img", $container).each(function() { 
      $(this).one("load error", function() { 
       imgCount--; 
       if (imgCount == 0) { 
        callback(); 
       } 
      }); 
      if (this.complete) $(this).load(); 
     }); 
    } 
}

以及如何使用它...

onImagesLoaded($("#compare-table-scrollable"), function() { 
    alert("images loaded"); 
});

公告加入if (this.complete)，這使得功能計數緩存的圖像，因此在調用函數之前加載。

來源

2013-09-30 15:59:18 Archer

很好用！謝謝 – user2636556

沒問題 - 很高興幫助:) – Archer

你不掛鉤的事件，直到在頁面加載過程非常晚，後事件已經開始了。請注意jsFiddle左上角的第二個下拉框，其中顯示「onload」。這是jsFiddle的非常令人驚訝的默認，這是將您的JavaScript代碼包裝在windowload事件處理程序中。在所有圖像加載或加載失敗之前，該處理程序不會被解僱。

如果更改下拉到no wrap - <body>，你會得到警告：http://jsfiddle.net/X4AmG/3/

這就是說，在標記被指定的圖像，我會擔心load或error事件管理得到在代碼連接其處理程序之前解僱。出於這個原因，我可能會做一些事情，而不是like this：

// Get the images 
var imgs = $('#compare-table-scrollable img'); 

// Schedule the first check for DOM ready 
$(checkForImagesDone); 

// Our check function 
function checkForImagesDone() 
{ 
    var counter = 0; 
    imgs.each(function() 
    { 
    if (this.complete) 
    { 
     ++counter; 
    } 
    }); 
    if (counter === imgs.length) 
    { 
    alert("All complete"); 
    } 
    else 
    { 
    setTimeout(checkForImagesDone, 50); // 50ms 
    } 
}

來源

2013-09-30 15:53:49

圖像加載事件尚未在文檔準備就緒時觸發。 –

出於某種原因，我認爲他正在使用文檔準備事件。我的錯;） –

@ClaudioRedi：你有沒有參考'負載'和'錯誤'不能提前開火？我會**愛**以確定他們不會。 :-)但我覺得很難購買它，尤其是因爲jQuery的DOM準備因瀏覽器而異... –

jquery .one（）加載和錯誤事件不起作用

回答

相關問題