如何选取动态加载的图像的图像加载
How to pickup image load of a dynamically loaded image?
我正在尝试为动态加载的图像实现加载的函数,但失败了。我首先在 html 标记中有 html 元素。然后我有一个计时器,它开始在 jquery 文档就绪函数上触发。 每次计时器触发(滴答声(时,我都会在 html 图像元素上设置源,我想知道它何时加载。 如果它加载正确,我想停止计时器。 如果加载不正确,则不执行任何操作。
我的主要尝试集中在设置源后检查图像节点的自然宽度和高度。 但是由于代码的运行速度可能比图像的加载速度快,因此在源设置后立即检查自然宽度和高度会导致值为 0 和 0。
我应该在设置图像源和检查自然宽度/高度之间添加时间延迟吗?这是正确的解决方案吗?
这是我所拥有的。 请注意,加载的事件永远不会触发,但每 2 秒我就会收到消息 这里 和 这里2
<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>
这是在 Vanilla-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>
相关文章:
- 如何在谷歌字体加载时显示加载图像
- 预加载图像并插入DOM
- 加载图像时加载图标
- 在页面启动期间加载图像
- 预加载图像image.onload脚本MVC
- 可以't在我的React组件中加载图像
- 加载图像后调整HTML画布的大小
- HTML/JS github页面项目没有't在使用firefox运行时加载图像或声音
- 错误:$injector:modulerr加载图像时模块处于角度
- 谷歌地图加载后隐藏加载图像
- 在照片查看器(Javascript和jQuery)中异步加载图像时可能出现错误
- 正在从字节数组加载图像内容
- 网页上已有tinymce加载图像列表
- 单击提交按钮后加载图像将冻结
- 如何使用Express'正确加载图像;s的静态中间件
- 使用jquery即时加载图像
- Html5画布使用JCanvasScript加载图像
- Javascript使用JCanvaScript在画布中加载图像
- 使用jquery/ajax显示加载图像
- ajax缓存false无法加载图像