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

Posted

技术标签:

【中文标题】如何检查图片是不是已完全加载?【英文标题】: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

它还有其他事件,如onabortonerror 等,以防您希望以不同方式处理它们。

【讨论】:

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

以上是关于如何检查图片是不是已完全加载?的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 settimeout 函数检查谷歌地图 API 是不是已完全加载?

如何在 Web 驱动程序中检查页面是不是已完全加载?

检查图像是不是已完全加载[重复]

我们是不是有任何通用函数来检查页面是不是已在 Selenium 中完全加载

嵌入的 svg 何时实际加载,我如何检查它是不是已加载

如何检查是不是已加载 Google Maps API?