この記事では、JSが実装したカスタムディスプレイロード待機画像プラグインについて説明します。次のように、参照のために共有してください。
私は自分の仕事で問題に遭遇しました - ビジネスプロセスはいくつかの段階に分かれています。データが各段階に表示されない場合、ロード画像の読み込み。gifファイルを表示する前に表示する必要があり、データがある場合、それは消えます。この目的のために、私はプロジェクト全体の使用を促進するための方法を自分で書きました。
<button onclick = "show（）"> show </button> <button onclick = "hide（）"> hide </button> <script> // create object var obj = new loadingimg（）; // show loading image function show（）{obj.show（）;} // loading画像機能を非表示loadingimg（mysetting）{var that = this; if（mysetting == "" || mysetting == undefined || typeof mysetting！= "object"）{mysetting = {}; } //タイムスタンプをスペースのIDとして使用しますvar targetid = new date（）。getTime（）; this.setting = {//画像のコンテナを挿入し、jQuery queryメソッドを使用してパラメーターターゲットコナイターを渡し、画像アドレスimgurl： "../img/loading.gif"、//画像表示imgwidth： "32px"、//画像スタイルのデフォルトスタイルimgclass： "" callback function beforeshow：function（plugin）{}、// callback function aftershow：function（plugin、targetid）{}} this.set = $ .extend（this.setting、mysetting）; //画面の幅this.getScreenWidth = function（）{return document.documentelement.clientWidth; } //画面の高さを取得しますthis.getScreenHeight = function（）{return document.documentelement.clientheight; } // control this.show = function（）{$（ "＃" + that.set.targetid）.show（）; } //コントロールを非表示this.hide = function（）{$（ "＃" + that.setting.targetid）.hide（）; } this.init = function（）{// if（typeof that.set.beforeshow == "function"）{that.setting.beforeshow（that）; } //変数var targethtml = ''; //指定されたコンテナにコンテンツを保存し、デフォルトでボディの下部に保存します（that.setting.targetConater！= "" && this.setting.targetConater！= undefined）{targethtml = '<img src = "' + that.setting.imgurl + '" id = " $（that.setting.targetConater）.html（targethtml）; } else {targethtml = '<img src = "' + that.set.imgurl + '">'; targethtml = '<div id = "' + that.setting.targetid + '" style = "display：none; position：aspolute; top：50％; left：50％; height：' + that.getScreenHeight（） + '; width：' + that.getScreenWidth（） + '">' + ' + targethtml +' </div> $（ "body"）。append（targethtml）; } //ユーザーが画像の幅をカスタマイズしているかどうかを決定します（that.setting.imgWidth！= "" "&& that.set.imgWidth.indexof（" px "）> 0）{$（"＃ "+targetid）.css（" width "、that.setting.imgwidth）; } // if（typeof that.set.aftershow == "function"）{that.setting.aftershow（that、targetid）;を表示した後にコールバック関数を実行します。 }} this.init（）;} </script>JavaScript関連のコンテンツの詳細については、このサイトのトピックをご覧ください：「JavaScriptの切り替え効果とテクニックの要約」、「JavaScript検索アルゴリズムスキルの要約」、「JavaScriptアニメーション効果とテクニックの概要」、「Javascriptエラー、および「Javascriptデータ構造」の概要」の概要の要約の要約をご覧ください。 JavaScriptトラバーサルアルゴリズムとテクニック」、および「JavaScriptの数学的操作の使用法の要約」
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。