如何检查图片是否已完全加载？

Question

一个小问题。如何检查Jcropbox中的图片是否已完全加载？ 我是一个 javascript 初学者，所以如果有人可以提供帮助，我将非常感激。 这是我的代码。

jQuery(document).ready(function () {
   jQuery('#<%= imgPerson.ClientID %>').Jcrop({
       onChange: showPreview,
       onSelect: updateCoords,
       aspectRatio: 1,
       minSize: [60, 60],
       setSelect: [1, 1, 60, 60], 
       allowSelect: false
   });
});

function updateCoords(c) {
   jQuery('#<%= X.ClientID %>').val(c.x);
   jQuery('#<%= Y.ClientID %>').val(c.y);
   jQuery('#<%= W.ClientID %>').val(c.w);
   jQuery('#<%= H.ClientID %>').val(c.h);
};

function showPreview(coords) {
   var height = '<%= hdnimgHeight.ClientID %>';
   var height2 = $(height).value;
   var rx = 60 / coords.w;
   var ry = 60 / coords.h;

   $('#<%= imgPreview.ClientID %>').css({
       width: Math.round(rx * 400) + 'px',
       height: Math.round(ry * height2) + 'px',
       marginLeft: '-' + Math.round(rx * coords.x) + 'px',
       marginTop: '-' + Math.round(ry * coords.y) + 'px'
   });
};

Answer 1

您可以监听图像的 onload 事件，当图像在浏览器中完全加载时会触发该事件。尝试这样的事情

<img src=".." onload="javascript:alert('Image loaded');" />
//Here you can call any javascript method in the onload event

它还有其他事件，如 onabort、onerror 等，以防您希望以不同的方式处理它们。