0

我在我的 HTML 页面中使用使用 AJAX 调用的 Web 服务。Web 服务返回数据的时间接近 30 到 40 秒。

在此加载期间，我需要在 Web 服务完全接收数据后使用一些加载 Gif 图像，加载图像必须隐藏。

我只使用 HTML、JAVASCRIPT、CSS、J 查询。

需要任何想法或样品。

我正在使用以下代码

$(document).ready(function () {
document.write('<img src="http://www.esta.org.uk/spinner.gif">');
});
$( window ).load(function() {
//This following Function Related To My Design
jQuery(".chosen").data("placeholder", "Select Frameworks...").chosen();
var config = {
'.chosen-select': {},
'.chosen-select-deselect': { allow_single_deselect: true },
'.chosen-select-no-single': { disable_search_threshold: 10 },
'.chosen-select-no-results': { no_results_text: 'Oops, nothing found!' },
'.chosen-select-width': { width: "95%" }
}
for (var selector in config) {
$(selector).chosen(config[selector]);
}
});

在上面的代码中，我的问题是页面加载 Gif 图像显示，但它不是仅隐藏 Gif 图像仅显示。

4

4 回答 4

0

使用您的 ajax 请求回调（成功/失败）而不是页面加载。

于 2013-10-18T06:23:46.877 回答
0

在您的页面上放置一个隐藏的图像，并在进行 ajax 调用后立即使该图像可见

$('#image').show();
$.ajax({
   complete: function(){
    $('#image').hide();
  }
});

并在完成 Ajax 调用时再次隐藏该图像。

于 2013-10-18T06:24:17.287 回答
0

发送请求时，只需通过将 Display 设置为 block 来显示 gif 动画，然后当您将数据设置为 none 或使用 jquery

function showHourGlass()
{
  $("#gifimage").show();
}

function hideHourGlass()
{
  $("#gifimage").hide();
}
于 2013-10-18T06:25:01.590 回答
0

您征求意见，我有一个示例 - http://www.myntra.com/shoes load 快速向下滚动这是 ajax jquery 请求，这是您在问题中提到的确切输出

检查源代码

Jquery Ajax在获取数据时加载图像

这是 html 的样子：

<button id="save">Load User</button>
<div id="loading"></div>

和javascript：

$('#save').click(function () {
    // add loading image to div
    $('#loading').html('<img src="http://preloaders.net/preloaders/287/Filling%20broken%20ring.gif"> loading...');

    // run ajax request
    $.ajax({
        type: "GET",
        dataType: "json",
        url: "https://api.github.com/users/jveldboom",
        success: function (d) {
            // replace div's content with returned data
            // $('#loading').html('<img src="'+d.avatar_url+'"><br>'+d.login);
            // setTimeout added to show loading
            setTimeout(function () {
                $('#loading').html('<img src="' + d.avatar_url + '"><br>' + d.login);
            }, 2000);
        }
    });
});

我希望这能帮到您。

于 2013-10-18T06:29:33.667 回答