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

Posted 2023-02-25

【中文标题】Jcrop 和 IE 问题以及动态添加的图像

【英文标题】：Issue with Jcrop and IE and dynamically added image

【发布时间】：2012-12-04 08:59:15

【问题描述】：

我正在向页面添加图像，然后在其上使用 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");

【参考方案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();