09 Dic 2015

Un loader como componente

Un loader como componente

Usando constantemente peticiones ajax para carga de elementos, lo básico es mostrar una notificación visual que permita al usuario saber que algo está pasando en la aplicación.

Comúnmente utilizamos algunas divisiones que son ocultas o visibles según o requerimos, pero, ya que buscamos tener código reutilizable, lo mejor es crear un componente de javascript que pueda ser invocado según la necesidad, y sin tener que crear elementos adicionales en la página.

var loader
loader = loader || (function () {
    var ajaxLoader = $('<div style="background-color: rgba(0, 0, 0, 0.7); width: 100%; height: 100%; display: block; position: absolute; left: 0px; top: 0px; z-index: 99;"><div style="left: 43%; position: absolute; top: 45%;"><img src="'+window.location.protocol + "//" + window.location.host + "/"+'/img/ajax-loader.gif"></div></div>')
    return {
        show: function() {
            $("body").append(ajaxLoader)
        },
        hide: function () {
            ajaxLoader.remove()
        },

    }
})()

Así, sólo hay que invocarlo con:

loader.show()

para mostrarlo o hide para ocultarlo.

Artículos relacionados