ajax调用后如何模糊内容

Question

I'm using ajax call on my page which changes content of a division block. What I wanted is to make that div content blur until new content loaded.

So,

Step 1 : click on button.

Step 2 : blur the content of that division block and user can't select anything now from that division.

Step 3 : Content loaded and gets back to normal state.

Step 1 and 3 are already done. What I need is step 2.

Answer 1

Lets say your main content block has the id 'main'.

in your button's onclick, before loading content etc.. do:

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');

in your css file, add:

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

once, everything is loaded up, and you are ready to unblur, do:

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

Answer 2

如果您使用 jQuery， ShowLoading 插件可以很好地完成此工作。

Answer 3

I would create a function with onreadystatechange and set a blur to that area until readystate==4 . Now the type of blur and how you want that done would be up to you but I used a similar idea to fade text in and out for an ajax call with my fade function in something like this.