Question

我有一个在javascript和css中大量加载的网络应用。第一次用户登录它需要一些时间来加载一旦下载js等。然后缓存将使一切更快。

我希望我的用户知道这个加载时间。如何在下载js和css的同时添加一些代码来“显示”一些加载信息？

Answer 1

你可以显示一个叠加说“loading ...”并在下载完成时隐藏它。

<html>
    <head>
        ... a bunch of CSS and JS files ...

        <script type="text/javascript" src="clear-load.js"></script>
    </head>
    <body>
        <div 
            style="position: absolute; left: 50px; right: 50px; top: 50px; bottom: 50px; border: 3px solid black;"
            id="loading-div"
        >
            This page is loading! Be patient!
        </div>

        ... Your body content ...
    </body>
</html>

clear-load.js的内容：

document.getElementById('loading-div').style.display = 'none';

当然，你也可以添加隐藏在最后一个javascript文件底部的div的javascript代码。

此外，尝试将您的javascript和css文件打包到一个文件中并对其应用gzip压缩或“缩小”。如果你做得对，你可以在20个请求中将500KB的javascript带到1个小于100KB的请求中。

Answer 2

慈悲的母亲，里卡多，这个应用程序涉及多少Javascript和CSS？

我猜，您可以使用AJAX请求加载JS和CSS，并对它们不执行任何操作。这会将JS和CSS文件加载到缓存中。您可以在“加载”页面上执行所有这些操作，并在加载文件后重定向到实际页面。但IMO你真的不应该这样做。使用Fiddler可以真正了解幕后发生的事情 - 确保在进行此优化之前，人们真的不得不等待他们的JS / CSS文件崩溃。

Answer 3

我觉得加载时间取决于javascript和css的大小。您确定没有其他因素导致加载时间过长吗？

Answer 4

请帮自己一个忙，试试YSlow，http://developer.yahoo.com/yslow。这是一个Firebug插件（是的，插件的插件），它将分析您的网站并推荐修复它的策略。

加载网站

4 个答案: