Question

我在我的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图像显示。

Answer 1

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

Answer 2

在您的网页上放置隐藏的图片，并在您进行ajax调用后立即显示该图片

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

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

Answer 3

发送请求时，只需将“显示”设置为“阻止”即可显示gif动画然后当你有数据设置显示为无或使用jquery

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

function hideHourGlass()
{
  $("#gifimage").hide();
}

Answer 4

你问想法，我有一个样本 - http://www.myntra.com/shoes 加载快速向下滚动这是ajax jquery请求，这是您在问题中提到的确切输出

检查源代码

Jquery Ajax loading image while getting the data

这就是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);
        }
    });
});

我希望这会对你有所帮助。

如何在页面上调用功能加载

4 个答案: