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

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

0 голосов
/ 02 ноября 2010

Я использую плагин Jcrop jquery и запускаю функцию 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));
});

Ответы [ 3 ]

1 голос
/ 02 ноября 2010

Просто погуглите, я сам решаю эту проблему. вот рабочий раствор 

function insertImage(name) {

  var img = new Image();
  img.id = 'cropbox';
  img.src = name;

  if(img.complete) setTimeout('initJcropBox()', 500);   
  else onload= initJcropBox;  

  return img;
 }
0 голосов
/ 02 ноября 2010

Некоторое время назад у меня была похожая проблема.Используйте load () для загрузки изображения и запуска функции обратного вызова. Здесь - более подробная информация.

0 голосов
/ 02 ноября 2010

Попробуйте заменить функцию 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;
}

Я не проверял его, поэтому дайте мне знать, стоит ли оно.

...