如何在页面加载中调用函数答案

【问题标题】：How To Call Function on page Loading如何在页面加载中调用函数
【发布时间】：2013-10-18 06:20:16
【问题描述】：

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

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

我只使用 HTML、JAVASCRIPT、CSS、J Query。

需要任何想法或样品。

我正在使用以下代码

$(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 图像仅显示。

【问题讨论】：

任何在 domcontentready（即 jquery 就绪）侦听器之外的代码都将在脚本加载后立即执行。你想做什么？
尽可能简单...添加一个加载图像的 div 首先隐藏它...在 ajax 调用之前显示它..然后在 ajax 回调中再次隐藏它... 没有发布的代码或至少你尝试过的东西......我只能给你这样的答案......我怀疑这很有用，但对我们来说也是如此......没有相关的代码，这个问题本身对我们毫无用处。
您是否使用$.ajax() 来获取结果？如果是这样，请查找 beforeSend 属性。
@bipen 我现在添加我的代码

标签： javascript jquery web-services loading

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

【解决方案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);
        }
    });
});

希望对你有所帮助。

【讨论】：