需要推荐页面加载器（html 内容）答案

【问题标题】：Need Recommendation for a Page Loader (html content)需要推荐页面加载器（html 内容）
【发布时间】：2010-03-18 19:33:21
【问题描述】：

客户要求使用页面加载器，这是一种“有吸引力”的东西，可以让访问者知道内容正在发送中。这适用于标准 html 内容 - 文本、图像等。

我在网上看到过一些，但其中很多都过时而且相当笨重。我正在寻找一种实施起来并不痛苦但看起来还不错的东西。

提前致谢。

【问题讨论】：

标签： loader preloader

【解决方案1】：

构建自己的并不难。您可以有一个显示动画 gif 的页面，然后使用 AJAX 加载该页面。只需搜索“AJAX 加载图像”之类的内容，您就可以获得一些很棒的加载 gif。这对您来说可能看起来很容易，也可能不太容易，但如果您使用的是 jQuery 和 PHP，对我来说这听起来并不难。

示例假设您有两个文件：test1.htm 和 test2.htm。您想在 test1 上显示 test2 的内容（需要一些时间来加载）（它应该具有快速加载的页面部分）。这是我制作的两个文件（使用 jQuery）：

test1.htm

 <head>
    <script language="javascript" type="text/javascript" src="jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $.get('test2.htm', function(data) {
                $('#Content').html(data);
            });
        });    
    </script>
</head>
<body>
    <div id="Content" >
        <img src="ajax-loader-image.gif" />
    </div>
</body>
</html>

test2.htm

<h2>Dynamically Loaded Content</h2>
<p>Hello World!</p>

所以这应该适用于您计划做的事情。重要的是您尝试将页面划分为加载速度快的部分和加载缓慢的部分。

【讨论】：

我已经找到了 AJAX 加载图像，但我还没有在代码部分找到任何东西。有什么具体的可以提供吗？谢谢。

【解决方案2】：

如果你想创建有吸引力的加载器，那么你应该通过漂亮的动画图像。但我建议你使用动画图像和 jQuery 的组合，因为在 jQuery 中有很多可用的动画。您可以查看以下链接以获取更多详细信息， jQuery Animation API How to add loader

你的 HTML 喜欢 -

<div class="loader"></div>

你的 CSS 喜欢

.loader {
    position: absolute;
   margin: 0 auto;
   z-index: 9999;
   background: url('icon-loader.gif') no-repeat;
   top: 50 px;
  cursor: wait;
}

您的 javascript 代码如 -

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
     $(window).load(function(){
        $('div.loading').fadeOut(1000);
    });
</script>

【讨论】：