простой модальный загрузчик

Question

Я новичок в использовании jquery. Я пытаюсь добавить в simplemodal.js (простой модальный Eirc Martin) функцию, называемую «jBox», которая будет принимать данные (т.е. ссылку) и параметры, а использование ajax загрузит содержимое в модальный контейнер. Таким образом, я хочу на своих страницах в нескольких местах легко вызвать эту функцию

jBox = function(address, options){ 
     $.get(address, function(data) {  
      $.modal(data); 
     }); 
    }; 
}); 

код работает отлично, но я хотел бы добавить изображение загрузки до содержания полностью загружено. Существует много похожих сообщений о загрузчике/spinner в simplebox, но ни одна из работ для меня. Я пытался следующий код

$('#test').load('<img src="loader.gif">').html(data); 
$('#test').modal(); 

Но, каким-то образом, он не работает для меня. Любые идеи, что я делаю неправильно? Спасибо

Answer 1

Я использую события ajaxStart и ajaxStop.

$("body").on({ 
    ajaxStart: function() { 
     $(this).addClass("loading"); // so page knows it's in loading state 
     // .. your modal code 
    }, 
    ajaxStop: function() { 
     $(this).removeClass("loading"); // not it loading state anymore 
     // .. What you should do if loading is done. (eg. hide modal) 
    }  
}); 

В этом случае я установил класс кузова «погрузка». Таким образом, вы можете сделать магию в css, если хотите. Я также использую его для отключения форм.

body.loading div.some-class { 
    // your special style for during loading 
}