0

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

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

提前致谢。

4

2 回答 2

0

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

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

测试1.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>

测试2.htm

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

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

于 2010-03-18T19:41:33.430 回答
0

如果你想创建有吸引力的加载器，那么你应该通过漂亮的动画图像。但我建议你使用动画图像和 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>
于 2013-09-01T06:56:43.847 回答