Question

所以，我知道如何使用JS或jQuery等在内容加载时显示“正在加载”消息。我创建了一个包含大量JS依赖项的相当大的webapp，我希望在加载所有脚本时显示“加载”消息。

我的head标记中包含许多<script src=…>个标记，我想在用户访问该页面时立即显示加载消息，然后在所有脚本都显示时将其删除加载。

最好的方法是什么？

Answer 1

然后使用jquery的$ ajax函数下载此javascript文件，并在下载完成后在head标签中添加脚本元素。

像这样：

// display loading message here 

 $ajax("javascriptfile.js",function(file){

  // attach downloaded file to head tag now

 });

Answer 2

您可能需要延迟加载脚本。此Lazy Loading显示的最后一个示例是通过YUI加载.js。该示例中的代码包含在下面供您参考：

var HelloWorld = {
    is_loaded: false,
    lazyLoad: function(callback) {
        var loader = new YAHOO.util.YUILoader();
        loader.addModule({
            name: "helloworld",
            type: "js",
            fullpath: "yui_ex/helloworld.js"
        });
        loader.require("helloworld");
        if (callback) {
            loader.onSuccess = callback;
        }
        loader.insert();
    },
    sayIt: function() {
        var args = arguments;
        HelloWorld.lazyLoad(function() { HelloWorld.sayIt.apply(HelloWorld, args); });
    }
};

请注意，您最初可能会加载加载图像并在回调函数中将其删除。阅读SO问题JQuery to load Javascript file dynamically，您也可以使用$.getScript()来做同样的事情。

您还可以在this link

中找到另一个示例

加载外部JavaScript时显示“正在加载”消息？

2 个答案: