コンテンツの読み込み中にプリローダーを追加するには？

ローダーがそこにあるはずです。天気が表示されるとすぐにpreloaderはなくなります。これはsimpleweather.jsプラグインを使用しています。コンテンツの読み込み中にプリローダーを追加するには？

私は使用しようとしました.hide().addClass()。動作していないようです。唯一のアイデアとして

// 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>

出典

2016-07-19 Akshay Jr.

を--here – Iceman

：

あなたのhtml内のローディングアニメーションを作成し、それがデフォルトで表示されるはずなので、ユーザーが見ますそれは直接訪問ページに。その後、あなたのjsの "成功"にそれを非表示にします。

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

とjsのコード

jQuery("#loading").hide()

出典

2016-07-19 06:56:08

次の操作を行い、ローダーを表示することができるようにします。ローダーファイルを指す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(); 
    } 
    }); 
}

出典

2016-07-19 06:59:42

あなたは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(); 
});

UPDATEを使用することができます。進行状況インジケータとしてtopbarを試してみてください。あなたは、スピナーでオーバーレイの代わりにそれを表示したり、隠すことができます。

出典

2016-07-19 07:00:15

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

出典

2016-07-19 07:01:25

$(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>

出典

2016-07-19 07:03:42 Iceman

コンテンツの読み込み中にプリローダーを追加するには？

答えて

関連する問題