内容加载时如何添加预加载器？

Question

所以在开始时应该有一个加载器，一旦天气显示preloader应该走了，它使用的是simpleweather.js插件。

我已经尝试使用.hide() .addClass() .Doesn't似乎工作。

// JS

$(document).ready(function() {
  navigator.geolocation.getCurrentPosition(function(position) {
    loadWeather(position.coords.latitude+','+position.coords.longitude);
  });
function loadWeather(location, woeid) {

  $.simpleWeather({
    location: location,
    woeid: woeid,
    unit: 'c',
    success: function(weather) {
      html = '<h1><i class="wi wi-fw wi-yahoo-'+weather.code+'"></i></h1>';
      html += '<h2>'+weather.temp+'&deg'+weather.units.temp+'</h2>';

      html += '<ul><li>'+weather.city+', '+weather.region+'</li>';
       html += '<li class="currently">'+weather.currently+'</li></ul>';
 $("#weather").hide().html(html).fadeIn("slow");      

    },
    error: function(error) {
  $("#weather").html('<p>'+error+'</p>');
    }
   });
}

});

// HTML

<body>
  <div id="weather"></div>

</body>

Answer 1

仅作为想法：

在您的html中创建加载动画，默认情况下该动画应该可见，因此用户可以在页面访问时直接看到它。 然后将其隐藏在js中的“成功”上。

<div id="loading">Loading....</div>

和js代码

jQuery("#loading").hide()

Answer 2

为了能够显示装载程序，请执行以下操作。 添加一个带有img标记的div，该标记指向加载程序文件。

<div id="loader" style="display:none"><img src="<path_to_loader_file>"></div>

更新您的功能：

function loadWeather(location, woeid) {
  var load = $('#loader');
  load.show();
  $.simpleWeather({
    location: location,
    woeid: woeid,
    unit: 'c',
    success: function(weather) {
               load.hide();
    },
    error: function(error) {
             load.hide();
    }
   });
}

Answer 3

您可以使用ajaxSetup

$.ajaxSetup({
    global: true,
    beforeSend: function(xhr, settings) {
        $('#some-overlay-with-spinner').show();
    },
    complete: function(xhr, status) {
        $('#some-overlay-with-spinner').hide();
    },
    error: function(xhr, status, error) {
        $('#some-overlay-with-spinner').hide();
    },
    timeout: 5000
});
$(document).ajaxError(function(event, jqxhr, settings, thrownError) {
    $('#some-overlay-with-spinner').hide();
});

更新：尝试使用topbar作为进度指示器。 您可以显示和隐藏它，而不是使用微调框覆盖它。

Answer 4

add this code
<div id="loading">Loading....</div> // use a gif image loader within this div

$("#loading").show(); //before ajax request

您的ajax代码-在这里

$("#loading").hide(); // after ajax response

Answer 5

 $(document).ready(function() { loadWeather('51.5034070,-0.1275920'); }); function loadWeather(location, woeid) { $("#weather").html('<img src="http://www.arabianbusiness.com/skins/ab.main/gfx/loading_spinner.gif">'); $.simpleWeather({ location: location, woeid: woeid, unit: 'c', success: function(weather) { html = '<h1><i class="wi wi-fw wi-yahoo-' + weather.code + '"></i></h1>'; html += '<h2>' + weather.temp + '&deg' + weather.units.temp + '</h2>'; html += '<ul><li>' + weather.city + ', ' + weather.region + '</li>'; html += '<li class="currently">' + weather.currently + '</li></ul>'; $("#weather").hide().html(html).fadeIn("slow"); }, error: function(error) { $("#weather").html('<p>' + error + '</p>'); } }); }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery.simpleWeather/3.1.0/jquery.simpleWeather.min.js"></script> <body> <div id="weather"></div> </body>

内容加载时如何添加预加载器？

问题描述

5 个解决方案

解决方案1
0 2016-07-19 06:56:08

解决方案2
0 2016-07-19 06:59:42

解决方案3
0 2016-07-19 07:00:15

解决方案4
0 2016-07-19 07:01:25

解决方案5
0 2016-07-19 07:03:42

内容加载时如何添加预加载器？

问题描述

5 个解决方案

解决方案1 0 2016-07-19 06:56:08

解决方案2 0 2016-07-19 06:59:42

解决方案3 0 2016-07-19 07:00:15

解决方案4 0 2016-07-19 07:01:25

解决方案5 0 2016-07-19 07:03:42

解决方案1
0 2016-07-19 06:56:08

解决方案2
0 2016-07-19 06:59:42

解决方案3
0 2016-07-19 07:00:15

解决方案4
0 2016-07-19 07:01:25

解决方案5
0 2016-07-19 07:03:42