Question

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

我在网上看过一些，但其中很多都过时而且相当笨重。我正在寻找一些不是很难实现但仍然看起来不错的东西。

提前致谢。

Answer 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>

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

Answer 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>

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

2 个答案: