需要一个页面加载器（HTML内容）建议

StackOverflow https://stackoverflow.com/questions/2472791

  •  20-09-2019
  •  | 
  •  

题

有一个客户端已要求页面加载，一些“有吸引力”，让游客知道，内容是在它的途中。这是标准的HTML内容 - 文本，图像等

我已经看到了网络上一些，但很多都是过时的，非常笨拙。我在寻找的东西，是不是实现一个痛苦，但看起来还是不错的。

预先感谢。

有帮助吗？

解决方案

这不会是很难建立自己的。你可以有一个页面，显示GIF动画，然后加载使用AJAX页面。您只需通过搜索类似“AJAX载入图像”得到一些伟大的GIF加载。这也可能似乎并不容易给你，但它听起来不是太硬给我，如果你使用jQuery和PHP。

示例 假设你有两个文件：test1.htm和test2.htm。要显示test2的的Test1上的内容（这需要一点加载）（应该具备哪些网页的加载是很快的部分）。这里的两个文件我提出（这使用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>

因此，这应该为你打算做什么工作。重要的是，你尝试在页面划分成加载快速加载速度慢的零件和部件。

其他提示

如果你想创造有吸引力的装载机，那么你应该去通过漂亮的动画形象。但我建议你使用动画形象和jQuery的组合，因为在jQuery中有很多可用的动画。您可以检出更多详情链接， jQuery的动画API 如何添加装载机

您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>
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top