如果我有一个信标：
<img src="http://example.com/beacon" />
我希望在信标请求完成后调用一个方法。就像是：
<script>
$("img.beacon").load(function() {
// do stuff knowing the beacon is done
});
</script>
是否可以？它在 jQuery 中吗？
JavaScript：知道图像何时完全加载
IT技术
javascript
jquery
image
2021-02-22 06:35:53
6个回答
当然。请记住需要在 src 属性之前添加负载。
$('<img />').load( function(){
console.log('loaded');
}).attr('src', imgUrl);
如果您已经在标记中定义了图像标签，那么您会在窗口加载事件触发时坚持使用，以确保图像已通过网络传输。
$('img.beacon').load()
不会总是正常工作，通常我这样做：
$.fn.imageLoad = function(fn){
this.load(fn);
this.each( function() {
if ( this.complete && this.naturalWidth !== 0 ) {
$(this).trigger('load');
}
});
}
上面的代码还涵盖了在执行脚本之前图像已完成加载的情况。当您在标记中定义图像时可能会发生这种情况。
像这样使用：
<img src='http://example.com/image.png' class='beacon' />
<script type='text/javascript'>
$(document).ready(function(){ //document.ready not really necessary in this case
$('img.beacon').imageLoad(function(){
//do stuff
});
});
</script>
<script type="text/javascript">
$().ready(function() {
$('img#beacon').attr('src', 'http://sstatic.net/so/img/so/logo.png')
.load(function() { alert('Image Loaded'); })
.error(function() { alert('Error Loading Image');
});
});
</script>
这将加载 StackOverflow 徽标。
如果加载成功，alert('Image Loaded');则执行。
如果失败，alert('Error Loading Image');则执行。
当然，其中任何一个都可以替换为您自己的函数。作为新用户，它拒绝了我的图片标签，但图片标签应该只包含该id='beacon'属性。除非你想添加一个类。我们src在这里在代码中设置属性，通常您正在监视完成的图像具有src无论如何以编程方式设置的值。
这是一个适用于所有浏览器的简单 javascript 代码：
var myImage = new Image();
myImage.onload = function() {
var image_width = myImage.width;
var image_height = myImage.height;
$('#pictureEl').html('<img width="'+ image_width +'" height="'+ image_height +'" src='+ myImage.src + '></img>');
};
myImage.src = myUrl;
一个 jQuery 片段必须在幕后做同样的事情。