JavaScript：了解图像何时完全加载
如果我有一个灯塔：
我希望在信标请求完成后调用一个方法。 就像是：
$("img.beacon").load(function() { // do stuff knowing the beacon is done });
可能吗？ 它在jQuery中吗？
当然。 请记住，需要在src属性之前添加负载。
$('![]()
').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'); } }); }
上面的代码还包括在执行脚本之前图像已完成加载的情况。 在标记中定义图像时可能会发生这种情况。
使用这样：
这将加载Stackoverflow徽标。
如果加载成功，则发出警报（’Image Loaded’）; 执行
如果失败，则发出警报（’错误加载图像’）; 执行
当然，这些中的任何一个都可以用你自己的function代替。
作为新用户，它拒绝了我的图片标签; 但是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('
'); }; myImage.src = myUrl;
一个jQuery片段必须在引擎盖下做同样的事情。
另一个选项，如果它适合您： onload事件在加载页面或图像后立即发生。
如：
![]()
您可以使用onload事件，该事件在整个页面加载完毕后触发。
$(window).load(function(){ //everything is loaded });