В Prototype Я могу показать изображение "Загрузка..." с помощью этого кода:
var myAjax = new Ajax.Request( url, {method: 'get', parameters: pars,
onLoading: showLoad, onComplete: showResponse} );
function showLoad () {
...
}
В jQuery я могу загрузить страницу сервера в элемент с помощью этого:
$('#message').load('index.php?pg=ajaxFlashcard');
но как я могу прикрепить к нему эту функцию, как в Prototype?
Есть несколько способов. Мой предпочтительный способ - присоединить функцию к событиям ajaxStart/Stop для самого элемента.
$('#loadingDiv')
.hide() // Hide it initially
.ajaxStart(function() {
$(this).show();
})
.ajaxStop(function() {
$(this).hide();
})
;
Функции ajaxStart/Stop будут срабатывать при каждом вызове Ajax.
Обновление. Как и в jQuery 1.8, в документации указано, что .ajaxStart/Stop следует прикреплять только к document. Это изменит приведенный выше фрагмент на:
var $loading = $('#loadingDiv').hide();
$(document)
.ajaxStart(function () {
$loading.show();
})
.ajaxStop(function () {
$loading.hide();
});
Для jQuery я использую
jQuery.ajaxSetup({
beforeSend: function() {
$('#loader').show();
},
complete: function(){
$('#loader').hide();
},
success: function() {}
});
Вы можете просто использовать функцию Jquery Ajax и использовать свой параметр beforeSend и определить некоторую функцию, в которой вы можете показать что-то вроде параметра loader div и on success, вы можете скрыть этот loader div здесь кодом, чтобы вы поняли:
jQuery.ajax({
type: "POST",
url: 'YOU_URL_TO_WHICH_DATA_SEND',
data:'YOUR_DATA_TO_SEND',
beforeSend: function(){
$("#loaderDiv").show();
},
success: function(data)
{
$("#loaderDiv").hide();
}
});
Надеемся, что в этом diver загрузчика вы можете получить любое изображение Spinning Gif, это сайт, который является отличным генератором Ajax Loader в соответствии с вашей цветовой схемой: http://ajaxload.info/
Вы можете вставить анимированное изображение в DOM прямо перед вызовом AJAX и выполнить встроенную функцию, чтобы удалить его...
$("#myDiv").html('<img src="images/spinner.gif" alt="Wait" />');
$('#message').load('index.php?pg=ajaxFlashcard', null, function() {
$("#myDiv").html('');
});
Это позволит убедиться, что анимация начинается с того же кадра при последующих запросах (если это имеет значение). Обратите внимание, что старые версии IE могут иметь трудности с анимацией.
Удачи!
$('#message').load('index.php?pg=ajaxFlashcard', null, showResponse);
showLoad();
function showResponse() {
hideLoad();
...
}
Если вы используете $.ajax(), вы можете использовать что-то вроде этого:
$.ajax({
url: "destination url",
success: sdialog,
error: edialog,
// shows the loader element before sending.
beforeSend: function () { $("#imgSpinner1").show(); },
// hides the loader after completion of request, whether successfull or failor.
complete: function () { $("#imgSpinner1").hide(); },
type: 'POST', dataType: 'json'
});
Используйте плагин загрузки: http://plugins.jquery.com/project/loading
$.loading.onAjax({img:'loading.gif'});
Вариант: у меня есть значок с id = "логотип" в левом верхнем углу главной страницы; гигабайт gif затем накладывается сверху (с прозрачностью), когда работает ajax.
jQuery.ajaxSetup({
beforeSend: function() {
$('#logo').css('background', 'url(images/ajax-loader.gif) no-repeat')
},
complete: function(){
$('#logo').css('background', 'none')
},
success: function() {}
});
Вы можете просто присвоить изображение загрузчика те же теги, на которых позже вы будете загружать контент с помощью вызова Ajax:
$("#message").html('<span>Loading...</span>');
$('#message').load('index.php?pg=ajaxFlashcard');
Вы также можете заменить тег span тегом изображения.
Я получил два изменения в исходном ответе .
document. Это затрудняет фильтрацию только некоторых из запросов ajax. Soo...Это код после этих изменений:
$(document)
.hide() // hide it initially
.ajaxSend(function(event, jqxhr, settings) {
if (settings.url !== "ajax/request.php") return;
$(".spinner").show();
})
.ajaxComplete(function(event, jqxhr, settings) {
if (settings.url !== "ajax/request.php") return;
$(".spinner").hide();
})
Помимо установки глобальных значений по умолчанию для событий ajax, вы можете установить поведение для определенных элементов. Возможно, достаточно просто изменить свой класс?
$('#myForm').ajaxSend( function() {
$(this).addClass('loading');
});
$('#myForm').ajaxComplete( function(){
$(this).removeClass('loading');
});
Пример CSS, чтобы скрыть #myForm со счетчиком:
.loading {
display: block;
background: url(spinner.gif) no-repeat center middle;
width: 124px;
height: 124px;
margin: 0 auto;
}
/* Hide all the children of the 'loading' element */
.loading * {
display: none;
}
Я также хочу внести свой вклад в этот ответ. Я искал что-то подобное в jQuery, и это то, что я в конечном итоге использовал.
Я получил свой загрузчик с http://ajaxload.info/. Мое решение основано на этом простом ответе на http://christierney.com/2011/03/23/global-ajax-loading-spinners/.
В основном ваша HTML-разметка и CSS выглядят следующим образом:
<style>
#ajaxSpinnerImage {
display: none;
}
</style>
<div id="ajaxSpinnerContainer">
<img src="~/Content/ajax-loader.gif" id="ajaxSpinnerImage" title="working..." />
</div>
И тогда вы код для jQuery будет выглядеть примерно так:
<script>
$(document).ready(function () {
$(document)
.ajaxStart(function () {
$("#ajaxSpinnerImage").show();
})
.ajaxStop(function () {
$("#ajaxSpinnerImage").hide();
});
var owmAPI = "http://api.openweathermap.org/data/2.5/weather?q=London,uk&APPID=YourAppID";
$.getJSON(owmAPI)
.done(function (data) {
alert(data.coord.lon);
})
.fail(function () {
alert('error');
});
});
</script>
Это так просто:)
$('#loading-image').html('<img src="/images/ajax-loader.gif"> Sending...');
$.ajax({
url: uri,
cache: false,
success: function(){
$('#loading-image').html('');
},
error: function(jqXHR, textStatus, errorThrown) {
var text = "Error has occured when submitting the job: "+jqXHR.status+ " Contact IT dept";
$('#loading-image').html('<span style="color:red">'+text +' </span>');
}
});
$.listen('click', '#captcha', function() {
$('#captcha-block').html('<div id="loading" style="width: 70px; height: 40px; display: inline-block;" />');
$.get("/captcha/new", null, function(data) {
$('#captcha-block').html(data);
});
return false;
});
#loading { background: url(/image/loading.gif) no-repeat center; }
Я использовал следующий диалог с jQuery UI Dialog. (Может быть, он работает с другими обратными вызовами ajax?)
$('<div><img src="/i/loading.gif" id="loading" /></div>').load('/ajax.html').dialog({
height: 300,
width: 600,
title: 'Wait for it...'
});
содержит анимированный gif загрузки до тех пор, пока его содержимое не будет заменено при завершении вызова ajax.
Обратите внимание, что вы должны использовать асинхронные вызовы для работы прядильщиков (по крайней мере, это то, что заставило мое не показывать до тех пор, пока после вызова ajax, а затем быстро ушел, когда звонок закончил и удалил счетчик).
$.ajax({
url: requestUrl,
data: data,
dataType: 'JSON',
processData: false,
type: requestMethod,
async: true, <<<<<<------ set async to true
accepts: 'application/json',
contentType: 'application/json',
success: function (restResponse) {
// something here
},
error: function (restResponse) {
// something here
}
});
Я делаю это:
var preloaderdiv = '<div class="thumbs_preloader">Loading...</div>';
$('#detail_thumbnails').html(preloaderdiv);
$.ajax({
async:true,
url:'./Ajaxification/getRandomUser?top='+ $(sender).css('top') +'&lef='+ $(sender).css('left'),
success:function(data){
$('#detail_thumbnails').html(data);
}
});
Я думаю, что ты прав. Этот метод слишком глобальный...
Однако - это хороший по умолчанию, когда ваш вызов AJAX не влияет на страницу. (например, сохранение фона). (вы всегда можете отключить его для определенного вызова ajax, передав "global": false - см. документацию на jquery
Когда вызов AJAX предназначен для обновления части страницы, мне нравятся мои "загрузочные" изображения, относящиеся к обновленному разделу. Я хотел бы посмотреть, какая часть обновлена.
Представьте, насколько это было бы здорово, если бы вы могли просто написать что-то вроде:
$("#component_to_refresh").ajax( { ... } );
И это покажет "загрузку" в этом разделе. Ниже приведена функция, которую я написал, которая также обрабатывает "загрузку" дисплея, но она специфична для области, которую вы обновляете в ajax.
Во-первых, позвольте мне показать вам, как его использовать.
<!-- assume you have this HTML and you would like to refresh
it / load the content with ajax -->
<span id="email" name="name" class="ajax-loading">
</span>
<!-- then you have the following javascript -->
$(document).ready(function(){
$("#email").ajax({'url':"/my/url", load:true, global:false});
})
И это функция - основной старт, который вы можете улучшить по своему усмотрению. он очень гибкий.
jQuery.fn.ajax = function(options)
{
var $this = $(this);
debugger;
function invokeFunc(func, arguments)
{
if ( typeof(func) == "function")
{
func( arguments ) ;
}
}
function _think( obj, think )
{
if ( think )
{
obj.html('<div class="loading" style="background: url(/public/images/loading_1.gif) no-repeat; display:inline-block; width:70px; height:30px; padding-left:25px;"> Loading ... </div>');
}
else
{
obj.find(".loading").hide();
}
}
function makeMeThink( think )
{
if ( $this.is(".ajax-loading") )
{
_think($this,think);
}
else
{
_think($this, think);
}
}
options = $.extend({}, options); // make options not null - ridiculous, but still.
// read more about ajax events
var newoptions = $.extend({
beforeSend: function()
{
invokeFunc(options.beforeSend, null);
makeMeThink(true);
},
complete: function()
{
invokeFunc(options.complete);
makeMeThink(false);
},
success:function(result)
{
invokeFunc(options.success);
if ( options.load )
{
$this.html(result);
}
}
}, options);
$.ajax(newoptions);
};
Если вы не хотите писать свой собственный код, есть также много плагинов, которые делают именно это:
Это лучший способ для меня:
JQuery
$(document).ajaxStart(function() {
$(".loading").show();
});
$(document).ajaxStop(function() {
$(".loading").hide();
});
Кофе
$(document).ajaxStart ->
$(".loading").show()
$(document).ajaxStop ->
$(".loading").hide()
Если вы планируете использовать загрузчик каждый раз, когда вы делаете запрос сервера, вы можете использовать следующий шаблон.
jTarget.ajaxloader(); // (re)start the loader
$.post('/libs/jajaxloader/demo/service/service.php', function (content) {
jTarget.append(content); // or do something with the content
})
.always(function () {
jTarget.ajaxloader("stop");
});
Этот код, в частности, использует плагин jajaxloader (который я только что создал)
Это очень простой и умный плагин для этой конкретной цели: https://github.com/hekigan/is-loading
Вы всегда можете использовать Block UI jQuery plugin, который делает все для вас, и даже блокирует страницу любого ввода, когда ajax погрузка. В случае, если плагин, похоже, не работает, вы можете прочитать о правильном способе его использования в этом ответе. Проверьте это.