问题与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事件，所以计时器掩盖该事件不承认这一事实。解决方法是在回调之前分拣代码：

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