Question

我目前正在开发一个移动网站，该网站对图像，css和javascript很重（例如，它使用的是150KB未压缩的库）。我为这些图像构建了一个预加载器，它运行得相当不错：

function loadImages(images){
    var sum = 0;
    for(i in images){
        sum += images[i][1]; // file size
    }
    setMaxProgress(sum);
    for(i in imageArray){
        var img = new Image();
        img.onload = function(){ addProgress(imageArray[i][1]); };
        img.src = imageArray[i][0];
    }
}

但是我现在想为javascript和css做类似的事情，但是可用的资源要少得多。我发现的唯一方法是在加载文档后对document.write（）html标记进行文档编写，但这并没有给我一个（可靠的）指示文件加载的时间。

在我还能衡量进展的同时，还有办法吗？

BTW：我使用它作为normale优化技术的补充，如缩小js / css，gzipping，css sprite和适当的缓存控制，而不是替代。用户可以跳过加载，然后网站工作得非常好，尽管不太顺利

Answer 1

如果您需要知道何时加载 JS，请使用以下loadScript函数。 ~~您可能能够为CSS做类似的事情，但我还没有尝试过它~~：

function preload(src, callback, node)
{
  var script,
      ready,
      where;

  where = node || document.body;
  ready = false;
  script = where.ownerDocument.createElement('script');
  script.src = src;
  script.onload=script.onreadystatechange=function(){
    if ( !ready && ( !this.readyState || this.readyState == 'complete' ) )
    {
      ready = true;
      callback();
      script.parentNode.removeChild(script);
    }
  };
  where.appendChild(script);
}

我已经更新了这个函数，并在firefox中测试了它。它适用于js和css（css需要进行一些跨浏览器检查。

我还想添加更多信息，说明为什么要使用script元素预加载css而不是link元素。

当加载页面时，需要分析影响DOM结构的资源，并按照它们出现的顺序插入。脚本元素需要在部分加载的DOM的上下文中执行，以便它们仅影响现有的DOM节点。

通过link元素包含的样式表不会更改DOM（忽略通过url可能的javascript插入）。在解析DOM树期间或之后是否加载样式表并不重要，因此没有必要回调何时加载资源。如果使用脚本元素链接到样式表，则在javascript解释器决定是否执行任何操作之前，还是需要加载外部资源，或者它是否应该因异常而崩溃。

如果您在隐藏的iframe的上下文中预加载每个脚本，则可以将所有错误包含在单独的上下文中，而不会导致页面上运行的javascript崩溃。

提醒一句：执行功能的外部脚本在删除之前仍有机会执行。如果脚本正在执行ajax轮询或类似的不必要操作，请考虑不预加载该特定脚本。

您可以在'loaded'的位置使用'complete'解决此问题，但有些旧版浏览器仅支持onload，所以对于那些浏览器，脚本仍然会被执行。预加载实际上是用于需要在各种不同页面上调用的库组件。

Answer 2

“我找到的唯一方法是在加载文档后将document.write（）加入html标签，但是这并没有给我一个（可靠的）加载文件的指示”

您可以在头标记中附加脚本元素，并将处理程序附加到onload或onreadystatechange'事件'，以指示文件何时加载。

以下网址详细解释了一些内容：

http://unixpapa.com/js/dyna.html

Answer 3

在回答问题之后我得到了以下结论：在HTML5中，标签现在有一个异步选项，最近主流浏览器也开始实现defer属性（它已经在IE中存在了很长时间）。您也可以将脚本放在身体的底部。

这些允许您推迟加载/执行脚本，直到页面加载完毕，从而有效地获得所需的行为。

HTML5还定义了脚本元素（标签）的onload属性，这可能是

的原因

Answer 4

我是这样做的：

$('<link/>', {
  rel:'stylesheet',
  type:'text/css',
  href: => path goes here <=,
  media:'all'
}).appendTo('head');

只需在那里输入你的路径。

瞧。

（对我来说很完美）

[编辑] 当然，你需要Jquery

Answer 5

$import.js是一个很小的实用程序，只有在必要时才允许控制加载到文档的js / css / less文件。

用法示例：

$import("script.js", "style.css", "[:js]script.php", function(files){ console.log(files); });

预加载javascript和css文件

5 个答案: