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

与 script element 一样、IE8 和下火力遗产 readyStateChange事件而不是用于图像 src 更新的标准 load 事件，因此计时器掩盖了事件无法识别的事实。解决方案是在回调之前 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();
    }
  }