0

私は 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));
});
4

3 に答える 3

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;
 }
于 2010-11-02T16:11:40.563 に答える
0

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;
}

私はそれをテストしていないので、それが価値があるかどうか教えてください。

于 2010-11-02T13:32:20.907 に答える
-1

少し前に、同様の問題がありました。load() を使用して画像を読み込み、コールバック関数をトリガーします。詳細はこちら。

于 2010-11-02T15:09:48.627 に答える