как размыть содержимое после вызова ajax

Question

Я использую вызов ajax на своей странице, который изменяет содержимое блока разделения. Что я хотел, так это размытие содержимого div до тех пор, пока не загрузится новый контент.

Таким образом,

Шаг 1: нажмите на кнопку.

Шаг 2: размытие содержимого этого блока разделения, и пользователь не может выбрать что-либо сейчас из этого подразделения.

Шаг 3: Содержимое загружено и возвращается в нормальное состояние.

Шаг 1 и 3 уже выполнены. Мне нужен шаг 2.

Answer 1

Если вы используете jQuery, то ShowLoading plugin хорошо справляется с этим.

Answer 2

Я бы создал функцию с onreadystatechange и установил размытие до этой области до readystate==4. Теперь тип размытия и то, как вы хотите, чтобы это было сделано, зависит от вас, но я использовал аналогичную идею, чтобы затухать текст внутри и снаружи для вызова ajax с моей функцией fade в чем-то подобном.

Answer 3

Допустим, ваш основной блок контента имеет идентификатор 'main'.

в вашей кнопки он OnClick, перед тем содержание загрузки и т.д .. сделать:

var pos = $('#main').offset(); 
var size = { w: $('#main').outerWidth(), h: $('#main').outerHeight() }; 
$('<div class="main_overlay"></div>') 
    .css({left: pos.left+'px', top: pos.top+'px', width: size.w+'px', height: size.h+'px'}) 
    .appendTo('body'); 

в файле CSS, добавьте:

.main_overlay { 
    position: absolute; 
    background-color: #fff; 
    opacity: 0.5; 
} 

один раз, все загружается, и вы готовы unblur, do:

$('.main_overlay').remove();