Artikel ini menjelaskan plugin gambar tunggu pemuatan tampilan khusus yang diimplementasikan oleh JS. Bagikan untuk referensi Anda, sebagai berikut:
Saya mengalami masalah dalam pekerjaan saya - proses bisnis dibagi menjadi beberapa tahap. Jika data tidak ditampilkan di setiap tahap, file pemuatan gambar pemuatan.gif harus ditampilkan sebelum ditampilkan, dan jika ada data, itu akan hilang. Untuk tujuan ini, saya sendiri menulis metode untuk memfasilitasi penggunaan seluruh proyek.
<Tombol OnClick = "show ()"> show </puttpute> <button onclick = "hide ()"> hide </button> <script> // Buat objek memuat var obj = new LoadingImg (); // tunjukkan fungsi pemuatan gambar () {obj.show ();} // Sembunyikan Fungsi Gambar Loading Hide () {Obj.Hide (); loadingimg (mysetting) {var that = this; if (mysetting == "" || mysetting == tidak terdefinisi || typeof mysetting! = "objek") {mysetting = {}; } // Gunakan cap waktu sebagai id ruang var targetID = new date (). GetTime (); this.setting = {// Masukkan wadah gambar, lewati parameter targetConater menggunakan metode kueri jQuery: "", // Gunakan alamat gambar imgurl: "../img/loading.gif", // Lebar target gambar Imgwidth: "32px", // Gaya default dari gambar Imgwidth: "32px", // Gaya default dari gambar Imgwidth: "" 32px ", // Gaya default dari gambar IMGLADSTIDS:" "32px", // Gaya default dari gambar ImglClaps: "" 32PX ", // Gaya default dari gambar ImglClaps:" "32px", // Gaya default dari gambar IMGLAWSTIPS: "" 32px " // fungsi panggilan balik sebelumnya beforeshow: function (plugin) {}, // fungsi callback aftershow: function (plugin, targetId) {}} this.setting = $ .extend (this.setting, mysetting); // Dapatkan lebar layar this.getScreenWidth = function () {return document.documentelement.clientwidth; } // Dapatkan ketinggian layar this.getScreenHeight = function () {return document.documentElement.clientHeight; } // tunjukkan kontrol this.show = function () {$ ("#" + that.setting.targetId) .show (); } // Sembunyikan kontrol this.hide = function () {$ ("#" + that.setting.targetId) .hide (); } this.init = function () {// tunjukkan jika (typeof that.setting.beforeshow == "function") {that.setting.beforeshow (itu); } // variabel var targethtml = ''; // Menyimpan konten dalam wadah yang ditentukan dan menyimpannya di bagian bawah tubuh secara default jika (itu. style = "display: none;"> '; $ (that.setting.targetConater) .html (targethtml); } else {targetHtml = '<img src = "' + that.setting.imgurl + '">'; targetHtml = '<div id = "' + that.setting.targetId + '" style = "display: none; position: absolute; atas: 50%; kiri: 50%; tinggi:' + itu.getScreenheight () + '; lebar:' + itu.getScreenwidth () + '">' + + TargetHtMl + '; $ ("body"). Tambahkan (targetHtml); } // Tentukan apakah pengguna telah menyesuaikan lebar gambar jika (itu. } // Jalankan fungsi callback setelah menampilkan IF (typeof that.setting.aftershow == "function") {that.setting.AffterShow (itu, targetID); }} this.init ();} </script>Untuk informasi lebih lanjut tentang konten terkait JavaScript, silakan periksa topik -topik situs ini: "Ringkasan Efek dan Teknik Peralihan Javascript", "Ringkasan Keterampilan Algoritma Pencarian JavaScript", "Ringkasan Teknik Animasi dan Teknik JavaScript," Ringkasan Ringkasan Data Javascript dan Ringkasan Data Javascript "," Ringkasan Data JavaScript "," Ringkasan Data JavaScript "," Ringkasan DEBUGRITM PENGABUNG DAN RINGKASI DAGGING "RINGKASI DAN RINGKASAN DATRICKS" RINGKASI DAN RINGKASI DAGGING "RINGKASI DAN RINGKASI DAGGING" RINGKAS Algoritma dan teknik traversal javascript ", dan" Ringkasan Penggunaan Operasi Matematika JavaScript "
Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.