jquery - 在图像完全加载之前触发图像加载事件？

Question

我正在使用 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));
});

Answer 1

Just google it, I sort this problem myself. here is the working solution

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

Some time ago I had a similar issue. Use load() to load the image and to trigger a callback function. Here are more details.