Question

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

Answer 1

这是在Vanilla-js中获取图像自然大小的简单方法（我的意思是没有jQuery）。它的作用：

为新图像分配新变量。
设置onload方案。重要的是在设置图像src - 属性之前执行此操作，因为一旦设置了加载开始。
最后我们设置src启动图像加载。

＆＃13;

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';

＆＃13;

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

＆＃13;

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

1 个答案: