图像载入事件触发图像完全加载之前？

Question

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

但在图像完全加载之前触发此功能。这是造成问题的原因。如显示不正确的jcboxbox大小或根本不显示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

只是谷歌它，我自己排序这个问题。这里是工作解决方案

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 id="cropbox" />'); 
    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（）加载图像并触发回调函数。 Here是更多细节。