jQuery Ajax Loader - Hiệu ứng chờ khi tải nội dung bằng AJAX

Hiện tại, vì công việc quá bận rộn nên mình không còn thời gian để post bài và duy trì nội dung cho blog nữa. Do đó tại thời điểm này, mình quyết định ngừng phát triển blog. Mọi bài viết sẽ vẫn được lưu trữ và mình sẽ cố gắng hỗ trợ tất cả các bạn khi có comment hỏi. Cảm ơn các bạn đã ủng hộ blog suốt thời gian qua !

Sử dụng AJAX giúp trang web chúng ta hoạt động mượt mà và cải thiện tốc độ đáng kể. Tuy nhiên, có 1 vấn đề thường gặp phải đó là thời gian nhận các respond khi người dùng gửi 1 request đi. Trong lúc chờ đợi nhận kết quả, chúng ta nên hiển thị thông báo để người dùng biết là có request đã gửi đi, nếu không sẽ khiến người dùng có cảm giác là chưa hực hiện được và sẽ lặp lại hành động này nhiều lần. Điều này đôi khi sẽ gây ra lỗi về phía server lẫn client nếu chúng ta không giải quyết tối ưu các lỗi.
Với jQuery AJAX Loader, bạn có thể chèn hiệu ứng hiển thị thông báo chờ bằng hình ảnh (gif) khá đẹp. Mặt khác plugin này còn vô hiệu hóa các thao tác của người dùng khi ajax đang hoạt động, giúp giảm thiểu lỗi xảy ra trong thời gian chờ.
Bạn hãy xem demo dưới đây để thấy cách mà jQuery AJAX Loader hoạt động. Sau đó có thể quyết định xem có nên dùng plugin này vào trang web của bạn không nhé!

Demo

View Demo :: jQuery Ajax Loader

The HTML

 Xem demo (View Source)

Note: Phần tử chứa ajaxloader phải có thuộc tính css là “position:relative;”

The CSS

 .ajax_overlay {}
 .ajax_loader {background: url("spinner_squares_circle.gif") no-repeat center center transparent;width:100%;height:100%;}

Note: bạn có thể format lại style cho class ‘.ajax_overlay ‘ nếu không muốn dùng style mặc định của ajax loader

The jQuery

function ajaxLoader (el, options) {
 // Becomes this.options
 var defaults = {
  bgColor   : '#fff',
  duration  : 800,
  opacity   : 0.7,
  classOveride  : false
 }
 this.options  = jQuery.extend(defaults, options);
 this.container  = $(el);
 
 this.init = function() {
  var container = this.container;
  // Delete any other loaders
  this.remove(); 
  // Create the overlay 
  var overlay = $('

').css({
    'background-color': this.options.bgColor,
    'opacity':this.options.opacity,
    'width':container.width(),
    'height':container.height(),
    'position':'absolute',
    'top':'0px',
    'left':'0px',
    'z-index':99999
  }).addClass('ajax_overlay');
  // add an overiding class name to set new loader style 
  if (this.options.classOveride) {
   overlay.addClass(this.options.classOveride);
  }
  // insert overlay and loader into DOM 
  container.append(
   overlay.append(
    $('

').addClass('ajax_loader')
   ).fadeIn(this.options.duration)
  );
    };
 
 this.remove = function(){
  var overlay = this.container.children(".ajax_overlay");
  if (overlay.length) {
   overlay.fadeOut(this.options.classOveride, function() {
    overlay.remove();
   });
  } 
 }

    this.init();
}

Note: chèn được code trên trong file script (*.js)

Usage examples

$(document).ready(function() {
 $(".box-1").live('click', function(){ 
  new ajaxLoader(this, options);
 });
});

Note: Xem chi tiết tại đây Ajax Loader demo page

Default options

var options = {
 bgColor   : '#fff',
 duration  : 800,
 opacity  : 0.7,
 classOveride  : false
}

Các giá trị của option

bgColor: string – colour of the background overlay
duration: number – length of fadeIn and fadeOut effects
opacity: number – opacity of the background overlay
classOveride: string – a class name to over-ride your default loader style

Download

‘Ajax Loader & Spinner’ - Demo và code

jQuery Ajax Loader & Spinner

Tham khảo http://www.aplusdesign.com.au/blog/jquery-ajax-loader-spinner/