圖像載入事件觸發圖像完全加載之前？

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是更多細節。