[英]How to add a preloader while content load?
所以在開始時應該有一個加載器，一旦天氣顯示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+'°'+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>
僅作為想法：
在您的html中創建加載動畫，默認情況下該動畫應該可見，因此用戶可以在頁面訪問時直接看到它。 然后將其隱藏在js中的“成功”上。
<div id="loading">Loading....</div>
和js代碼
jQuery("#loading").hide()
為了能夠顯示裝載程序，請執行以下操作。 添加一個帶有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();
}
});
}
您可以使用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作為進度指示器。 您可以顯示和隱藏它，而不是使用微調框覆蓋它。
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
$(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 + '°' + 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>
如何為預加載器添加延遲，以便即使在頁面加載幾秒鍾后預加載器也會顯示
[英]How do I add a delay to preloader so the preloader will display even after page load for a couple of seconds
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.