Este artículo describe el complemento de imagen de carga de carga personalizada implementado por JS. Compártelo para su referencia, como sigue:
Encontré un problema en mi trabajo: un proceso de negocio se divide en varias etapas. Si los datos no se muestran en cada etapa, el archivo de carga de imagen de carga.gif debe mostrarse antes de que se muestre, y si hay datos, desaparecerá. Con este fin, escribí un método yo mismo para facilitar el uso de todo el proyecto.
<button onClick = "show ()"> show </boton> <button onClick = "hide ()"> hide </boton> <script> // crea el objeto de carga var obj = new LoadingImg (); // show de la función de la imagen de carga show () {obj.show ();} // escondite la función de la imagen de carga hide () {obj.hide ();}/}//método de imagen de carga (método de imagen (objeto) de la imagen de carga de la carga de la carga de carga. loadingimg (mysetting) {var that = this; if (mysetting == "" || mysetting == Undefined || typeOf mySetting! = "objeto") {mysetting = {}; } // Use la marca de tiempo como ID del espacio var targetID = new Date (). GetTime (); this.setting = {// Inserte el contenedor de la imagen, pase el parámetro TargetConater usando el método de consulta jQuery: "", // use la dirección de imagen imgurl: "../img/loading.gif", // El ancho de la imagen muestra imgwidth: "32px", // el estilo predeterminado de la imagen imgclass: "", // el Id de la generación de control ", el control de la generación", el objetivo de la generación, ", el objetivo", el objetivo ", el objetivo", el objetivo ", el objetivo, el objetivo", el objetivo, el objetivo ", el objetivo, el objetivo", el objetivo, el objetivo ", el objetivo", el objetivo ": Función de devolución de llamada BefeforShow: function (plugin) {}, // La función de devolución de llamada Aftershow: function (plugin, targetId) {}} this.setting = $ .extend (this.setting, mysetting); // Obtenga el ancho de la pantalla this.getScreenWidth = function () {return document.documentelement.clientWidth; } // Obtenga la altura de la pantalla this.getScreenHeight = function () {return document.documentelement.clientHeight; } // show control este.show = function () {$ ("#" + that.setting.targetId) .show (); } // ocultar el control este.hide = function () {$ ("#" + that.setting.targetId) .Hide (); } this.init = function () {// show if (typeof thypetting.beforeshow == "function") {that.setting.beforeshow (que); } // La variable var Targethtml = ''; // Almacenar el contenido en el contenedor especificado y almacenarlo en la parte inferior del cuerpo de forma predeterminada if (that.setting.targetConater! = "" && this.setting.targetConater! = Undefined) {targethtml = '<img src = "' + that.setting.imgurl + '" id = "' + that.setting.targetid + '" stelly "stelly". $ (that.setting.targetConater) .html (Targethtml); } else {targethtml = '<img src = "' + that.setting.imgurl + '">'; Targethtml = '<div id = "' + that.setting.targetid + '" style = "Display: Ninguno; Position: Absolute; Top: 50%; Izquierda: 50%; altura:' + that.getScreenheight () + '; width:' + that.getScreenWidth () + '">' + targethtml + '</iv>';; $ ("cuerpo"). append (Targethtml); } // Determine si el usuario ha personalizado el ancho de la imagen if (that.setting.imgwidth! = "" && that.setting.imgwidth.indexof ("px")> 0) {$ ("#"+targetid) .css ("ancho", que.setting.imgwidth); } // Ejecute la función de devolución de llamada después de mostrar if (typeof thypetting.aftershow == "función") {that.setting.aftershow (que, targetId); }} this.init ();} </script>For more information about JavaScript related content, please check out the topics of this site: "Summary of JavaScript switching effects and techniques", "Summary of JavaScript search algorithm skills", "Summary of JavaScript animation effects and techniques", "Summary of JavaScript errors and debugging techniques", "Summary of JavaScript data structures and algorithm skills", "Summary of JavaScript Algoritmos y técnicas de recorrido ", y" Resumen del uso de operaciones matemáticas de JavaScript "
Espero que este artículo sea útil para la programación de JavaScript de todos.