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

Posted 2023-02-25

【中文标题】如何检查图片是不是已完全加载？

【英文标题】：How can I check if the picture is fully loaded?如何检查图片是否已完全加载？

【发布时间】：2011-12-05 15:22:50

【问题描述】：

一个小问题。如何检查 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'
   );
;

【问题讨论】：

您问题的 Javascript 被某些服务器端脚本语言污染。请修复。

@TomalakGeret'kal：嗯，源代码已经足够好了。 .NET 标签准确地向我们展示了他在做什么。保留 ASP.NET 标记，skill2bereal。

@Jon：我无法将他的代码传递给我的浏览器，以便免费为他进行这项研究。这提醒了我，一些 html 也会有所帮助。 （而且，更重要的是，.NET 完全无关紧要，应该被抽象掉。）

@TomalakGeret'kal：不一定。如果 ASP.NET 代码返回的内容会破坏 JavaScript 格式或相关内容。如果他只是粘贴生成的 HTML，我们会感到困惑，如果这是问题中的错字与代码中的错字。

@Jon：是的，这将是相关的，这就是为什么他应该在考虑在此处发布之前将 ASP.NET作为初始调试步骤抽象出来。它将问题缩小到 ASP.NET 或 Javascript；同时提出两个问题是荒谬的。

【参考方案1】：

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

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

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

【讨论】：

感谢您的回复。嗯，也许我忘了提点什么... jcrop 应该在图片完全加载时才加载。