Este artigo descreve o plug -in de imagem de carga de exibição personalizado, implementado pelo JS. Compartilhe -o para sua referência, como segue:
Encontrei um problema no meu trabalho - um processo de negócios é dividido em vários estágios. Se os dados não forem exibidos em cada estágio, o arquivo de carregamento da imagem de carregamento.gif deve ser exibido antes de ser exibido e, se houver dados, ele desaparecerá. Para esse fim, escrevi um método para facilitar o uso de todo o projeto.
<button onclick = "show ()"> mostre </botão> <button onclick = "hide ()"> hide </botão> <cript> // Crie o objeto de carregamento var obj = new loadingimg (); // Mostra a função de imagem de carregamento Show () {obj.show ();} // hide a função de imagem hide () () {obj.hide (); carregingImg (mySetting) {var que = this; if (mySetting == "" || mySetting == indefinido || tipo de mysetting! = "objeto") {mySetting = {}; } // Use o carimbo de hora como o ID do espaço var TargetId = new Date (). GetTime (); this.setting = {// Insira o contêiner da imagem, passe o parâmetro TargetConater usando o método de consulta jQuery: "", // use o endereço da imagem imgurl: "../img/loading.gif", // a largura da imagem imgwidth: "32px", // o estilo default da imagem da imagem // a função anterior de retorno de chamada beforeShow: function (plugin) {}, // a função de retorno de chamada após o show: function (plugin, targin) {}} this.setting = $ .extend (this.setting, mysetting); // obtenha a largura da tela this.getScreenwidth = function () {return document.documentElement.clientWidth; } // Obtenha a altura da tela this.getScreenHeight = function () {return document.documentElement.clientHeight; } // Mostrar controle this.show = function () {$ ("#" + that.setting.targetId) .show (); } // Ocultar o controle this.hide = function () {$ ("#" + that.setting.targetId) .hide (); } this.init = function () {// Mostre if (typeof thats.setting.beforShow == "function") {that.setting.beforShow (that); } // a variável var Targethtml = ''; // Armazene o conteúdo no contêiner especificado e armazene -o na parte inferior do corpo por padrão, if (that.setting.targetConater! = "" && this.setting.targetconater! = Indefinido) {Targethtml = '<img src =' + thatsetting.Imgurl + '' Id = '' '' ''. $ (that.setting.targetConater) .html (Targethtml); } else {Targethtml = '<img src = "' + that.setting.imgurl + '">'; Targethtml = '<div id = "' + that.setting.targetId + '" style = "Display: Nenhum; Posição: Absoluto; topo: 50%; esquerda: 50%; altura:' + that.getScreenHeight () + '; largura:' + that.getScreenwidth () + ''> ' + Targethtml +' ' $ ("corpo"). Anexar (Targethtml); } // Determine se o usuário personalizou a largura da imagem se (that.setting.imgwidth! = "" && that.setting.imgwidth.indexof ("px")> 0) {$ ("#"+TargetId) .css ("width", thatsetting.imgwidth); } // Execute a função de retorno de chamada após exibir if (typeof thats.setting.aftershow == "function") {that.setting.aftershow (that, 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 e Técnicas de Traversal "e" Resumo do Uso do Javascript Mathematic Operations "
Espero que este artigo seja útil para a programação JavaScript de todos.