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