如何异步运行多个内部JavaScript代码，而不是阻止？

我有一个PHP脚本创建的网页，加载时将包含0到N个div元素。对于每个div，我运行一个特定的JavaScript代码来处理与该div相关的数据。此代码所做的一件事是创建一个元素，并将其'src'属性设置为已知（但可变）大小的图像的某个URL。这是为了缓存而完成的。这些图像不应该显示在初始页面布局 - 但每个应该出现在某个用户输入（鼠标悬停）后 - 所以我试图缓存图像，以便它们不会很长时间出现。如何异步运行多个内部JavaScript代码，而不是阻止？

图像加载过程需要时间 - 每次图像加载代码块导致高负载时间。一个例子：

<div id="i1"> 
<script type="text/javascript"> 
    /* run code relevant to 'i1', and amongst other things load some image 
     into a detached img element for later use. let's call this code 'bcode' */ 
</script> 
<div id="i2"> 
<script type="text/javascript"> 
    /* run 'bcode' for i2 */ 
</script> 

<div id="...and so on">

要尝试具有异步运行的代码，我尝试这样做：

<div id="i1"> 
(function() { 
    var asyncScriptElement = document.createElement('script'); 
    asyncScriptElement.async = true; 
    var scriptText = document.createTextNode ('here I put all of the relevant "bcode"'); 
    asyncScriptElement.appendChild (scriptText); 
    document.getElementById ('Img_1_2').appendChild (asyncScriptElement); 
}());

它的工作原理FF（仍然不够快）下，它显然不能在IE下工作。你有什么建议如何做到这一点？另外请注意，我并不需要从另一个外部php获取任何东西（即使用XMLHttpRequest） - 我在这个php中获得了所有需要的数据。我只需要一种方法来使图像解除阻塞...

来源

2010-11-27 Yuval A.