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

jQuery/JS 页面加载

发布于 2024-11-08 06:20:13 字数 132 浏览 0 评论 0原文

我在网站上进行了搜索，但找不到我想要的东西。

所以我希望当页面加载时显示AJAX加载器iamge（例如），而不是保持白色...

请给出更详细的代码，我是新的。

谢谢！

原文

分享到QQ

分享到微博

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

发布评论

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

幻想少年梦 2024-11-15 06:20:13

$(function(){

  var ajax_load = "<img src='images/loading.gif' alt='loading...' />";
  $('body').html(ajax_load);
    var postData = $("#form").serialize();
        $.ajax({
            type: "POST",
            url: "ajaxpage.php",
            data: postData,
            success: function(body){
            $('body').html(body);
            }
        });
});

我相信这就是你想要的。

$(function(){

  var ajax_load = "<img src='images/loading.gif' alt='loading...' />";
  $('body').html(ajax_load);
    var postData = $("#form").serialize();
        $.ajax({
            type: "POST",
            url: "ajaxpage.php",
            data: postData,
            success: function(body){
            $('body').html(body);
            }
        });
});

I believe that is what you want.

回复收藏 0 原文

七分※倦醒 2024-11-15 06:20:13

从结构上讲，它会是这样的：

使用空容器加载 DOM，包括“加载器图像”
加载用于加载内容并填充容器的 javascript 文件
将 javascript 事件处理程序附加到所有链接以覆盖加载新页面的默认行为

但使用某种框架会更好。 “Hash bang”（#！）是一种流行的模式，请在谷歌上搜索它。

祝你好运！

回复收藏 0 原文

涙—继续流 2024-11-15 06:20:13

为了使其更明显，假设我们有带有此标记的 HTML 页面：

<button id="btnLoad">Load Content</button>
<div id="content">
  Please click "Load Content" button to load content.
</div>

我们希望在用户单击“加载内容”按钮时加载内容。因此，我们需要先将单击事件绑定到该按钮，然后仅在触发后才发出 AJAX 请求。

$("#btnLoad").click(function(){
    // Make AJAX call
    $("#content").load("http://example.com");
});

上面的代码将 http://example.com 中的内容加载到 .加载页面时，我们希望在“内容”中显示动画 GIF 图像。因此，我们可以进一步改进我们的代码，如下所示：

$("#btnLoad").click(function(){

  // Put an animated GIF image insight of content
  $("#content").empty().html('<img src="loading.gif" />');

  // Make AJAX call
  $("#content").load("http://example.com");
});

.load() 函数将用加载的内容替换加载图像指示器。

您可能正在使用 jQuery 的其他 AJAX 函数，例如 $.ajax()、$.get()、$.post()，在本例中使用它们的回调函数来删除加载图像/文本并附加加载的数据。

这也是隐藏内容直到 ajax 调用完成以显示它的解决方案。

CSS:

<style type="text/css">
     #content 
     {
         display:none;
         }
</style>

jQ:

$(function () {

            var loadingImg = $('#loadingImage');
            loadingImg.show();

            $.ajax({
                url: "secondpage.htm",
                cache: false,
                success: function (html) {
                    loadingImg.hide();
                    $("#content").append(html).fadeIn();
                }
            });

        });

HTML:

<body>
    <img src="loader.gif" id='loadingImage' alt='Content is loading. Please wait' />
    <div id='content'>

    </div>

</body>

To make it more apparent, imagine we have HTML page with this markup:

<button id="btnLoad">Load Content</button>
<div id="content">
  Please click "Load Content" button to load content.
</div>

We want to load content when a user clicks on the "Load Content" button. So we need to bind a click event to that button first and make AJAX request only after it is fired.

$("#btnLoad").click(function(){
    // Make AJAX call
    $("#content").load("http://example.com");
});

he above code loads contents from http://example.com into the . While the page is being loaded we want to display our animated GIF image in the "content". So we could further improve our code like so:

$("#btnLoad").click(function(){

  // Put an animated GIF image insight of content
  $("#content").empty().html('<img src="loading.gif" />');

  // Make AJAX call
  $("#content").load("http://example.com");
});

The .load() function would replace our loading image indicator with the loaded content.

You might be using jQuery’s other AJAX functions like $.ajax(), $.get(), $.post(), in this case use their callback function to remove loading image/text and append your loaded data.

Here is also the solution for having the content hidden until the ajax call is completed to reveal it.

CSS:

<style type="text/css">
     #content 
     {
         display:none;
         }
</style>

jQ:

$(function () {

            var loadingImg = $('#loadingImage');
            loadingImg.show();

            $.ajax({
                url: "secondpage.htm",
                cache: false,
                success: function (html) {
                    loadingImg.hide();
                    $("#content").append(html).fadeIn();
                }
            });

        });

HTML:

<body>
    <img src="loader.gif" id='loadingImage' alt='Content is loading. Please wait' />
    <div id='content'>

    </div>

</body>

回复收藏 0 原文

~没有更多了~

关于作者

秋心╮凉

暂无简介

0 文章

0 评论

22 人气

关注发私信

友情链接

文江博客

jQuery/JS 页面加载

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

发布评论

评论（3）

关于作者

相关话题

热门标签

推荐作者

烙印

singlesman

给自己一个微笑

独孤求败

晨钟暮鼓

我是自愿种绣球花的

友情链接

jQuery/JS 页面加载

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

发布评论

评论（3）

关于作者

相关话题

热门标签

推荐作者

烙印

singlesman

给自己一个微笑

独孤求败

晨钟暮鼓

我是自愿种绣球花的

友情链接

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