如何获取动态加载的图像的图像加载？

我正在尝试并未能实现动态加载的图像的加载函数。我首先在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

如何获取动态加载的图像的图像加载？

回答

相关问题