Loading JavaScript

Orgulloso

Me siento muy orgulloso de este widget que he hecho en JAVASCRIPT. Es la tipica ventana de "CARGANDO" al entrar o cambiar de pagina. Es muy facil de utilizar y lo puedes personalizar. Es precisamente en la personalizacion donde esta lo bueno que tiene este widget JAVASCRIPT, ya que lo hace versatil a cualquier proyecto web.

Como utilizarlo

Para tulizarlo puedes obtar por descargar el JS desde el enlace lateral o hacer la llamada desde mi servidor seguro de la siguiente forma

    < script src="https://community-mall.com/js/loading.js">< /script>
    < script type="text/javascript">
        var loadingJS = loadingJS();
        loadingJS.start();
    < /script> 

Una cosa muy importante es que, aunque la llamada a la libreria la puede poner en HEADER de la pagina, la inicializacion del script hay que ponerlo en el BODY, preferiblemente al principio del mimo. Yo he hecho un monton de pruebas, y esta es la mejor forma para que funcione correctamente.

Solo con esto es suficiente para que muestre una ventanita con una imagen que se mueve con las palabras "Espera... Wait..." en dos circulos concentricos moviendose en sentido contratrio dando vueltas.

Imagenes utilizadas

La lista de images que puedes seleccionar es la siguiente

• 1 internet.gif
• 2 loading.gif
• 3 flower.gif
• 4 wait.gif
• 5 coche.gif
• 6 relog analógico
• 7 luna
• 8 relog de arena

Personalizacion

Puedes personalizar desde la imagen que se muestra, enviando la ruta URL de la nueva imagen, el tamaño de la ventana, los mensajes (textos) que se muestran, hasta el CSS completo. Para personalizar la ventana se debe de enviar un objeto JSON con los parametros. Para ello utilizaremos la funcion setOptions(params) de la siguiente forma antes de la llamada a start():

params = {
            [parametro]: '[valor]'
        };
        loadingJS.setOptions(params);

Variables de personalizacion

Personalizar la ventana

Se indican los valores por defecto utilizados.

Esta es la lista de las funciones a las que puedes llamar y que es lo que hacen o los valor de devuelven

• clone: crea una nueva instancia del objeto.
• setOptions(params): envia el JSON con la personalizacion de la ventana.
• start: inicia la ventana de loading.
• show: muestra la ventana si esta ya desaparecio.
• hide: oculta la ventana si esta visible.
• visible: devuelve en que estado esta, si visible o no.
• version: devuelve la version del widget.

El codigo

Bueno como este widget es gratuito aqui pongo el codigo, para el que quiera criticar o aportar como mejorarlo. Yo ya tengo algunas ideas de mejora, pero eso para un poco mas adelante. Perdon si mezco español e ingles en los comentarios del codigo, pero como trabajo en ingles pero mi lengua es el español, pues hay veces que me lio... jejeje

/**
 * Loading.js v1.1.11
 * https://aprende-a-programar.com/b/Loading-JavaScript/ 
 * Free Licence 2017-2019 Sergi Ortiz Gomez (drualcman@msn.com)
 * Credits Jose M. Alarcon
 * https://www.jasoft.org/Blog/post/TRUCO-Como-detectar-el-cierre-o-la-salida-de-una-pagina-Web.aspx# id_0cd0824b-c0f5-40c3-b3bf-a707eb4fd503
 * https://www.jasoft.org/Blog/post/Detectar-que-la-pagina-actual-esta-lista.aspx
 * 
 * La licencia de uso del script es Creative Commons Reconocimiento-NoComercial-CompartirIgual
 */

/* Create Object */
(function (root, factory) {
    if (typeof exports === 'object') {
        /* CommonJS*/
        factory(exports);
    } else if (typeof define === 'function' && define.amd) {
        /* AMD. Register as an anonymous module.*/
        define(['exports'], factory);
    } else {
        /* Browser globals*/
        factory(root);
    }
}
    /* Create a Loading */
    (this, function (exports) {
        /**
         * GLOBALS VARIABLES
         */
        var VERSION = '1.1.10';
        var OPTIONS;

        /* Create default Object */
        function LoadingJS(_options) {
            /* Configurar el objeto */
            if (_options === undefined) {
                OPTIONS = _LoadingOptions(); /* Default Options */
            } else {
                OPTIONS = _LoadingOptions();
                OPTIONS = _mergeOptions(OPTIONS, _options);
            }
        };

        /* Default Options CSS */
        function _LoadingOptions() {
            return {
                /* Config app */
                WindowName: 'cargando',
                /* Name for the window */
                title: 'Click para Cerrar',
                /* title for the window */
                text: '',
                /* text down the image */
                ImgIndex: 0,
                /* image to show from the templates */
                imgCss: '',
                /* change the css for the image */
                ImgURL: 'https://community-mall.com/img/Wait.gif',
                /* image to show ignore the index image */
                CssClass: 'LoadingJS',
                /* CSS GROUP */
                cursor: 'pointer',
                width: '130px',
                height: '130px',
                padding: '15px',
                position: 'fixed',
                top: '30%',
                left: '40%',
                color: '# 000000',
                textaling: 'center',
                backgroundcolor: '# ffffff',
                radius: '10px',
                boxshadow: 'inset # 696763 0px 0px 14px',
                zindex: '9999'
            };
        };

        /* Default CSS */
        function Css() {
            if (OPTIONS.CssClass === undefined || OPTIONS.CssClass === '' || OPTIONS.CssClass === 'LoadingJS') {
                var css = 'cursor: ' + OPTIONS.cursor + ';';
                css += 'width: ' + OPTIONS.width + ';';
                css += 'height: ' + OPTIONS.height + ';';
                css += 'padding: ' + OPTIONS.padding + ';';
                css += 'position: ' + OPTIONS.position + ';';
                css += 'top: ' + OPTIONS.top + ';';
                css += 'left: ' + OPTIONS.left + ';';
                css += 'color: ' + OPTIONS.color + ';';
                css += 'text-align: ' + OPTIONS.textaling + ';';
                css += 'background-color: ' + OPTIONS.backgroundcolor + ';';
                css += 'box-shadow: ' + OPTIONS.boxshadow + ';';
                css += 'border-radius: ' + OPTIONS.radius + ';';
                css += '-moz-border-radius: ' + OPTIONS.radius + ';';
                css += '-webkit-border-radius: ' + OPTIONS.radius + ';';
                css += 'display: block;';
                css += 'z-index: ' + OPTIONS.zindex + ';';
                return css;
            } else {
                return 'class="' + OPTIONS.CssClass + '"';
            }
        };

        /**
         * Get the image or set the url from the user
         * @param {number} _ImgIndex get the number for the image to use
         * @returns string
         */
        function GetImage(_ImgIndex) {
            var img = '';
            switch (_ImgIndex) {
                case 1:
                case '1':
                    img = 'https://community-mall.com/img/Internet.gif';
                    break;
                case 2:
                case '2':
                    img = 'https://community-mall.com/img/Wait.gif';
                    break;
                case 3:
                case '3':
                    img = 'https://community-mall.com/img/flower.gif';
                    break;
                case 4:
                case '4':
                    img = 'https://community-mall.com/img/loading.gif';
                    break;
                case 5:
                case '5':
                    img = 'https://community-mall.com/img/coche.gif';
                    break;
                case 6:
                case '6':
                    img = 'https://community-mall.com/img/clock.gif';
                    break;
                case 7:
                case '7':
                    img = 'https://community-mall.com/img/moon.gif';
                    break;
                case 8:
                case '8':
                    img = 'https://community-mall.com/img/arena.gif';
                    break;
                default:
                    img = OPTIONS.ImgURL;
            }

            if (img === undefined || img === '' || img === null) img = 'https://community-mall.com/img/Internet.gif';

            return img;
        }

        /* Definir el estilo de la imagen */
        function GetImageCss(_ImgIndex) {
            var imgStyle = '';

            switch (_ImgIndex) {
                case 1:
                case '1':
                    imgStyle = 'style="position: relative; top: 17%;"';
                    break;
                case 2:
                case '2':
                    imgStyle = '';
                    break;
                case 3:
                case '3':
                    imgStyle = 'style="position: relative; top: 30%;"';
                    break;
                case 4:
                case '4':
                    imgStyle = 'style="position: relative; top: 35%;"';
                    break;
                case 5:
                case '5':
                    imgStyle = 'style="position: relative; top: 40%;"';
                    break;
                case 6:
                case '6':
                case 7:
                case '7':
                case 8:
                case '8':
                    imgStyle = 'style="position: relative; top: 10%;"';
                    break;
                default:
                    if (OPTIONS.imgCss === undefined ||
                        OPTIONS.imgCss === '' ||
                        OPTIONS.imgCss === null) imgStyle = '';
                    else imgStyle = 'class="' + OPTIONS.imgCss + '"';
            }

            return imgStyle;
        };

        /**
         * Overwrites obj1's values with obj2's and adds obj2's if non existent in obj1
         * via: http://stackoverflow.com/questions/171251/how-can-i-merge-properties-of-two-javascript-objects-dynamically
         *
         * @param {object} obj1 objeto origen
         * @param {object} obj2 objeto modificado
         * @returns {object} obj3 a new object based on obj1 and obj2
         */
        function _mergeOptions(obj1, obj2) {
            var obj3 = {};
            for (var attrname in obj1) { obj3[attrname] = obj1[attrname]; }
            for (var attrname1 in obj2) { obj3[attrname1] = obj2[attrname1]; }
            return obj3;
        };

        /* Start the Novelty */
        function Start() {
            Load();
            window.onload = cerrar;
            var ventana = document.getElementById(OPTIONS.WindowName);
            ventana.addEventListener('click', function () { cerrar(); });
            window.onbeforeunload = cargando;
            cargando();
        };

        /** Comprobar el estado de la pagina
         * Gracias a Jose Manuel Alarcon
         * http://www.jasoft.org/Blog/post/Detectar-que-la-pagina-actual-esta-lista.aspx
         */
        var tmpReady = setInterval(isPageFullyLoaded, 100);

        function isPageFullyLoaded() {
            if (document.readyState == "complete") {
                cerrar();
                clearInterval(tmpReady);
            } else {
                try {
                    var ventana = document.getElementById(OPTIONS.WindowName);
                    vntVisible(ventana, 'Block');
                } catch (error) {
                    return error;
                }
            }
        }

        /* mostrar u ocultar la ventana */
        function vntVisible(s, v) {
            s.style.display = v;
        }

        /* efecto de entrada */
        function fadeIn(el) {
            el.style.opacity = 0;
            var tick = function () {
                el.style.opacity = +el.style.opacity + 0.1;
                if (+el.style.opacity < 1) {
                    (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16)
                }
            };
            tick();
        }

        /* efecto de salida */
        function fadeOut(el) {
            el.style.opacity = 1;
            var tick = function () {
                el.style.opacity = +el.style.opacity - 0.1;
                if (+el.style.opacity > 1) {
                    (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16)
                }
            };
            tick();
        }

        /* mostrar la ventana */
        function cargando() {
            try {
                var ventana = document.getElementById(OPTIONS.WindowName);
                fadeIn(ventana);
                vntVisible(ventana, 'Block');
            } catch (error) {
                return error;
            }
        };

        /* ocultar la ventana */
        function cerrar() {
            try {
                var ventana = document.getElementById(OPTIONS.WindowName);
                fadeOut(ventana);
                vntVisible(ventana, 'none');
                clearInterval(tmpReady);
            } catch (error) {
                return error;
            }
        };

        /**
         * Mostrar la ventana del preload
         */
        function Load() {
            var ventana = document.getElementById(OPTIONS.WindowName);
            if (ventana) {
                /* La ventana ya esta dibujada no hacer nada */
                return;
            } else {
                /* Create a window */
                var html = '                    ' alt="Loading" onerror="this.src="https://community-mall.com/img/Wait.gif">';
                if (OPTIONS.text !== undefined &&
                    OPTIONS.text !== '' &&
                    OPTIONS.text !== null) {
                    html += '
' + OPTIONS.text + '
';
                }
                ventana = document.createElement('div');
                ventana.id = OPTIONS.WindowName;
                ventana.title = OPTIONS.title;
                ventana.style = Css();
                ventana.innerHTML = html;
                var markup = document.body;
                markup.appendChild(ventana);
            }
        };

        /**
         * Mostrar la ventana del preload
         * @returns boolean
         */
        function Visible() {
            var retorno = false;
            var ventana = document.getElementById(OPTIONS.WindowName);
            if (ventana) {
                /* La ventana ya esta dibujada */
                if (ventana.style.display === 'block') {
                    retorno = true;
                } else {
                    retorno = false;
                }
            } else {
                retorno = false;
            }
            return retorno;
        }

        /* Create the global object */
        var loadingJS = function (_options) {
            if (typeof (_options) === undefined) {
                /* need params show help to use */
                return new LoadingJS();
            } else {
                /* Run With all parameters sended */
                return new LoadingJS(_options);
            }
        };

        /**
         * Current Novelty version
         *
         * @property version
         * @type String
         */
        loadingJS.version = VERSION;

        /*Prototype*/
        loadingJS.fn = LoadingJS.prototype = {
            clone: function () {
                return new LoadingJS(OPTIONS);
            },
            setOptions: function (_opciones) {
                OPTIONS = _LoadingOptions();
                OPTIONS = _mergeOptions(OPTIONS, _opciones);
                return this;
            },
            start: function () {
                Start.call(this);
                return this;
            },
            show: function () {
                cargando.call();
                return this;
            },
            hide: function () {
                cerrar.call();
                return this;
            },
            visible: function () {
                return Visible();
            },
            version: function () {
                return VERSION;
            }
        };

        exports.loadingJS = loadingJS;
        return loadingJS;
    })
);

Conclusiones

Bueno, poco a poco, vamos aprendiendo a hacer cosillas con JAVASCRIPT espero que os guste y compartir con todos vuestros amigos.

Happy coding

#javascript #web #HTML

Revision 1.1.8 (28/Ago/2017)

Revision 1.1.11 (11/Jul/2019)