当前位置：文江博客话题详情

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

发布于 2024-08-25 21:31:32 字数 150 浏览 6 评论 0原文

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

我在网上看到过一些，但其中许多已经过时且相当笨拙。我正在寻找一些实施起来并不困难但看起来仍然不错的东西。

提前致谢。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

像极了他 2024-09-01 21:31:32

建立自己的并不难。您可以有一个显示 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>

所以这应该适用于您计划执行的操作。重要的是，您尝试将页面分为加载快速的部分和加载缓慢的部分。

It wouldn't be hard to build your own. You could have a page that shows an animated gif and then loads the page using AJAX. You can get some great loading gifs just by searching for something like "AJAX loading image". This may or may not seem easy to you, but it doesn't sound too hard to me if you were using jQuery and PHP.

Example
Say you have two files: test1.htm and test2.htm. You want to show the contents of test2 (which take a bit to load) on test1 (which should have the parts of the page that load quickly). Here's the two files I made (this uses 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>

So this should work for what you're planning to do. The important thing is that you try to divide up your page into parts that load quickly and parts that load slowly.

回复收藏 0 原文

山川志 2024-09-01 21:31:32

如果你想创建有吸引力的加载程序，那么你应该浏览漂亮的动画图像。但我建议你使用动画图像和 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>

If you want to create attractive loader, then you should go through nice animated image. But I suggest you to use combination of animated image and jQuery, Because in jQuery there is a lot of animation available. You can checkout following link for more details,
jQuery Animation API
How to add loader

Your HTML like -

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

Your CSS like

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

Your javascript code like -

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

回复收藏 0 原文

~没有更多了~