jquery - Jcrop 和 IE 问题以及动态添加的图像

Question

我正在向页面添加图像，然后在其上使用 JCrop，但它似乎在 IE8 中不起作用，除非我$img.show()在调用 JCrop 方法之间稍等片刻。这是一个 JCrop 也在 IE8 中工作的最小示例，但我想去掉第 16 和 18 行，或者至少了解在这 250 毫秒内需要发生什么。

 10       var $img = $('<img id="example" style="display:none;">');
 11 
 12       $("body").append($img);
 13 
 14       $img.on("load", function () {
 15           $img.show();
 16           setTimeout(function () {
 17               $("#example").Jcrop();
 18           }, 250);
 19       });
 20 
 21       $img.attr("src", "/assets/example.png");

Answer 1

与脚本元素一样，IE8 和下火传统的readyStateChangeload事件而不是图像更新的标准事件src，因此计时器掩盖了无法识别事件的事实。解决方案是在回调之前 fork 代码：

function imageSwap()
  {
  var $img = $('<img id="example" style="display:none;">');

  $("body").append($img);

  $img.attr("src", "/assets/example.png");

  if(!!document.addEventListener)
    {
    $img.on("load", loadTest)
    }

  else
    {
    $img.get(0).attachEvent("onreadystatechange", loadTest);
    } 

  function loadTest(event)
    {
    $img.show();
    $("#example").Jcrop();
    }
  }