9:24 1 1
Loading JavaScript

Loading JavaScript

  DrUalcman |  julio 12017

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


La imagen wait.gif y coche.gif (haciendo alusion al coche fantastico) son de mi propia cosecha. Las otras ni se de donde las saque, de Internet, esta claro, asi que agradezco a quien fuera el autor de las mismas, lamento no saber quienes son para poder poner sus nombres en este blog. Todo el que desea crear imagenes y que las agregue, seran bien recibidas, y por supuesto, se le incluira en los creditos.

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

  • WindowName: nombre que quieras que tenga la ventana, por si haces un CSS especial.
  • title: titulo de la ventana, se muestra cuando paras el raton/cursor sobre la ella.
  • text: es un texto que se mostrara justo debajo de la imagen.
  • ImgIndex: es el numero de imagen de la lista anterior. 0 para enviar tu propia imagen.
  • imgCss: es el CSS que se utilizara en la imagen.
  • ImgURL: es donde le enviar la URL de tu imagen personalizada.
  • CssClass: indica la case CSS que tu yahas creado para la ventana. Si indicas una clase CSS se omitiran el resto de todas las variables para personalizar el CSS utilizado.

Personalizar el estilo

Se indican los valores por defecto utilizados.

  • cursor: pointer
  • width: 130px
  • height: 130px
  • padding: 15px
  • position: fixed
  • top: 30%
  • left: 40%
  • color: black
  • textaling: center
  • backgroundcolor: white
  • radius: 10px
  • boxshadow: inset # 696763 0px 0px 14px
  • zindez: 9999

Funciones

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)

Se ha eliminado las referencias a JQUERY para independizar la libreria. Ahora todo el codigo usa JAVASCRIPT puro y puede ser ejecutado en paginas que no utilizen JQUERY.

Revision 1.1.9 (24/Jul/2018)

Se elimina el (C) mal puesto en el script ya que siempre ha sido licencia free. Y se incluyen los creditos a las personas de donde se obtuvo informacion.

Revision 1.1.10 (1/Sep/2018)

Creadas 3 nuevas imágenes. Reloj de Arena, Relog Analógico y Luna.

Revision Documento (4/Dic/2018)

Había una error en la página que no dejaba mostrar el ejemplo de como cargar el script. Espero que escargando el ejemplo en zip lo entendieran bien.

Revision 1.1.11 (11/Jul/2019)

Se agrega clearInterval(tmpReady); en la funcion cerrar() ya que si deseabas cancelar el script antes de que la pagina estuviera cargada del todo no se podía. Ahora aunque la página no este terminada de cargar o el usuario habla click para cerrar la ventana de cargando se cancela el script para poder acceder a la página. 


1 Guest reviews

    • srJJ
      jueves, 14 de noviembre de 2019 23:08

      Muy bueno el aporre

 
 
 

File