JavaScript 阻止图像加载

Question

我使用以下代码允许在我的网站上并行下载 JavaScript

var head  = document.getElementsByTagName("head")[0]; 

var sTag1 = document.createElement("script");
sTag1.type = sTag1.type = "text/javascript";
sTag1.src = "http://example.com/one.js";

var sTag2 = document.createElement("script");
sTag2.type = sTag2.type = "text/javascript";
sTag2.src = "http://example.com/two.js";

var sTag1 = document.createElement("script");
sTag3.type = sTag3.type = "text/javascript";
sTag3.src = "http://example.com/three.js";

head.appendChild(sTag1); 
head.appendChild(sTag2); 
head.appendChild(sTag3); 

但是，使用 YSlow，它显示即使 one.js、two.js 和 Three.js 正在并行下载 - 直到最后一个 JavaScript 完全下载后才会加载图像。

我该怎么做才能让图像不会因 JavaScript 文件下载而被阻止加载。

Answer 1

在 标记上方加载 Javascript 文件。

Answer 2

你从哪里触发该代码？因为您可以等待执行引用的代码，直到看到 window.load 事件，例如：

<script type='text/javascript'>
function loadMyScripts() {
    /* ...your loading code here...*/
}
window.onload = loadMyScripts; // Or use addEventListener/attachEvent to do it
</script>

在加载所有图像之前，不会触发 window.load 事件，这样您就可以确保脚本不会妨碍您。当然，这也为用户留下了相当大的时间来开始使用页面进行操作，因此您需要确保页面不需要 JavaScript 来运行。