JAVASCRIPT – TEKNIK SPA UNTUK LOADING ATAU MEMUAT GAMBAR

Assalamu alaikum Temen2 aGan2 Programmer web Yth.

Apa kabar? Kembali lagi asanoer menulis artikel menarik yang masih dalam topik yang sama dari judul JAVASCRIPT – MODUL DASAR MEMBUAT SINGLE PAGE APLLICATION. InsyaAllah ada mamfaat buat temen aGan2 yang mau belajar tentang SPA tersebut. Namun khusus di judul ini asanoer mengajak temen aGan2 untuk membuat sebuah loading gambar dengan teknik SPA.

Silahkan Download Bahannya

Kali ini sengaja asanoer berikan segmen download di awal artikel. Karena memang ada sebagian aGan2 yang malas baca2 teori banyak2. Jadi silahkan download saja bahannya terlampir ya aGan Yth sekalian.

DOWNLOAD DI SINI

Bagi temen aGan2 lainnya yg merasa perlu step2nya, maka asanoer persilahkan untuk melanjutkan membaca di segmen selanjutnya.

Langkah-langkah Mebuat Loading Gambar

Seperti segmen-segmen artikel asanoer sebelumnya, maka penyuguhan langkah-langkahnya adalah berikut ini.

1. Silahkan Buka Halaman Ini

Seperti biasanya asanoer menganjurkan kepada aGan2 dalam artikel asanoer lainnya untuk membaca sedikit informasi dalam HALAMAN INI. Dan untuk kembali lagi ke sini.

2. Silahkan Baca Kembali

Karena masih dalam topik yang sama, maka buat aGan2 asanoer anjurkan membaca kembali JAVASCRIPT – MODUL DASAR MEMBUAT SINGLE PAGE APLLICATION untuk memulainya. Mungkin bagi yang sudah mengikutinya silahkan lanjutkan berikut.

3. Mengedit Kode Fungsi

Dalam artikel sebelumnya dapat aGan2 baca, kalau fungsi penanganan Hash hanya mengubah teks dalam sebuah div. Maka sekarang bagaimana dalam div dibuat tag img untuk memuat atau pengubahan gambar saat mengganti hash dalam url.

Dari kode berikut

 

Sekarang menjadi.

 

4. Uji Coba

  • Silahkan buka alamat tanpa hash

Buka langsung file download di atas, alias tanpa diikuti hash. Maka hasil yang keluar adalah seperti dalam gambar ini.

javascript-teknik-spa-untuk-loading-atau-memuat-gambar-01-tes-awalan-tanpa-hash

gambar-01-tes-awalan-tanpa-hash

  • Kemudian pilih atau klik menunya

Untuk langkah ini akan menghasilkan pilihan menu pada halaman-halaman web pada umumnya.

javascript-teknik-spa-untuk-loading-atau-memuat-gambar-02-pilih-menu

gambar-02-pilih-menu

  • Terakhir ambil url dengan hash.

Sekarang ketik salah satu hash yang ada dalam menu secara manual di address bar. Misalnya ketik #google-logo maka gambar yang akan dimuat adalah logo google dalam div.

javascript-teknik-spa-untuk-loading-atau-memuat-gambar-03-ketik-hash

gambar-03-ketik-hash

Teori Dasar

Teori dasaranya adalah bagaimana cara meload gambar dari perubahan hash tersebut. Maka dari itu asanoer bisa mengubah teks tadi dengan sebuah tag img. Dengan bantuan perubahan tag tersebut maka otomatis gambar diload juga di halaman.

Akan tetapi ada juga cara lain meload gambar tanpa bantuan perubahan hash. Yaitu dengan cara membaca onClick pada setiap menu yang diberikan kemudian membaca property ID. Akan tetapi di sini asanoer mempelajari cara pengambilan atau pemuatan data dari server melalui perubahan hash dan tanpa meload ulang halaman utuhnya (yang asanoer sebut SPA). Jadi asanoer berikan dua file berbeda yaitu dengan teknik SPA (memakai Hash URL) dan teknik onClick (tanpa SPA).

Silahkan tinggalkan komentar atau  bisa berlangganan dengan click lonceng kiri bawah untuk mengikuti artikel menarik terbaru dari asanoerdotcom. InsyaAllah bermanfaat.

Leave a Reply

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

This site uses Akismet to reduce spam. Learn how your comment data is processed.