如何獲取動態加載的圖像的圖像加載？

我正在嘗試並未能實現動態加載的圖像的加載函數。我首先在html標記中有html元素。然後我有一個計時器，開始啓動jQuery文檔就緒功能。每當計時器觸發（滴答），我設置html圖像元素的來源，我想知道它何時加載。如果它正確加載，我想停止計時器。如果它沒有正確加載，則什麼也不做。如何獲取動態加載的圖像的圖像加載？

我的主要嘗試着重於在設置源代碼後檢查圖像節點的自然寬度和高度。但由於代碼運行速度可能比圖像的加載速度快，因此在源設置後檢查自然的寬度和高度導致值爲0和0.

我應該只是在設置圖像源和檢查自然寬度/高度？這是正確的解決方案嗎？

這是我的。請注意，加載的事件永遠不會觸發，但每2秒，我得到消息HERE和HERE2

<head> 
... 
<script> 
var timer; 

$(document).ready(function() 
{ 
    timer = setInterval(function() { tick() }, 2000); 
}); 

function tick() 
{ 
    alert('here'); 
    $('#loginTestImage').on('load', function() 
    { 
     //never gets here 
     alert('loaded image'); 
     window.clearInterval(timer); 
    }); 
    alert('here2'); 

    $("#loginTestImage").attr("src", 'https://asdasd.sds.com/asdp/images/asdasd.png'); 
} 
</script> 
</head> 
<body> 
    <img id='loginTestImage'> 
</body>

來源

2014-11-05 jordan.peoples

您可能需要讀取[了'load'事件的注意事項與圖像一起使用時（http://api.jquery.com/load-event/）部的jQuery文檔。 – 2014-11-05 17:18:02

ahh警告，討厭注意事項哈哈 – 2014-11-05 17:20:36

你可能會遇到緩存問題。嘗試追加一個nocacher：'asdasd.png？cachebuster =「+ new Date（）。getTime（）' – briansol 2014-11-05 17:33:51

這是最簡單的方式來獲得圖像的自然大小香草JS（無jQuery的，我的意思）。它做什麼：

爲新圖像分配新變量。
設置onload方案。重要的是在設置圖像的src屬性之前執行它，因爲一旦它被設置，負載就會開始。
最後，我們設置了src，它啓動圖像加載。

var cont = document.getElementById('output'); 
 

 
var img = new Image(); 
 
img.onerror = function() { 
 
    cont.innerHTML = 'Error occured'; 
 
} 
 
img.onload = function() { 
 
    cont.innerHTML = 'Image natural height = ' + this.naturalHeight + '<br>' + 'Image natural width = ' + this.naturalWidth; 
 
} 
 
img.src = 'http://brand.jquery.org/resources/jquery-dev-summit-mark.gif';

<div id="output"></div>

來源

2014-11-05 17:25:21 CmajSmith

現在試用 – 2014-11-05 17:34:17

作品像一個該死的魅力 – 2014-11-05 17:43:31

PS你的圖片鏈接被破壞@CmajSmith – 2014-11-05 17:45:58

如何獲取動態加載的圖像的圖像加載？

回答

相關問題