запуск события загрузки при загрузке изображения до его полной загрузки?

Question

Я использую Jcrop jquery plugin и запускаю функцию initJcropBox() при событии onload.

, но эта функция запускается до того, как изображение будет полностью загружено. что вызывает проблемы. например, показывать неправильный размер 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 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 - это более подробная информация.