image onload事件在其图像完全加载之前触发？

我正在使用Jcrop jquery插件，并在onload事件上触发initJcropBox()函数。

但是在图像完全加载之前会触发此function。 这引起了问题。 例如显示jcropbox的大小不正确或根本没有显示jcropbox。

当我放置一条线时，它工作正常。 但不是解决方案。 setTimeout('initJcropBox()',2000);

在浏览器中完全加载/渲染图像后，如何触发initJcropbox()函数？

  var api; function initJcropBox(){ api = $.Jcrop('#cropbox',{ bgColor: 'black', bgOpacity: .7, onSelect: updateCoords, onChange: updateCoords, boxWidth: 400 }); api.animateTo([0,0,$('#cropbox').width(),$('#cropbox').height()]); } function insertImage(name) { var img = new Image(); img.onload = initJcropBox; img.src = name; img.id = 'cropbox'; return img; } $('td.imageFile').live('click', function(e){ fileWithPath = "uploads/original/" + $(this).text(); $('#cropbox').remove(); $("#cropcontainer").empty().html(insertImage(fileWithPath)); }); 

Answer 1

只是google它，我自己解决这个问题。 这是工作解决方案

 function insertImage(name) { var img = new Image(); img.id = 'cropbox'; img.src = name; if(img.complete) setTimeout('initJcropBox()', 500); else onload= initJcropBox; return img; } 

Answer 2

尝试用它替换你的insertImage(name)函数。 这应该触发图像上的加载事件，直到它真正加载为止。

 function insertImage(name) { var img = $(''); img.load(function(){ if (! this.complete) { return false; $(this).load(); } else if (typeof this.naturalWidth != 'undefined' && this.naturalWidth == 0) { return false; $(this).load(); } else initJcropBox(); }) .attr('src',name); return img; } 

我没有测试过，所以让我知道它是否值得。

Answer 3

前段时间我有类似的问题。 使用load（）加载图像并触发回调函数。 这里有更多细节。