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事件一样，而不是图像load更新的标准src事件，因此计时器屏蔽了以下事实：事件未被识别。解决方案是在回调之前分叉代码：

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

Jcrop和IE问题并动态添加图像

1 个答案: