Aptech Jakarta
Kategori
  • Android
  • Aplikasi
  • Gadget
  • Game
  • Teknologi
  • Website
  • Windows

Wedding Organizer Surabaya | Wedding Organizer Gresik | Wedding Organizer Malang | Wedding Organizer Madura | Wedding Organizer Mojokerto | Wedding Organizer Jakarta | Wedding Organizer Bogor | Wedding Organizer Depok | Wedding Organizer Tangerang | Wedding Organizer Bekasi

Catering Surabaya | Catering Gresik | Catering Malang | Catering Mojokerto | Catering Jakarta | Catering Bogor | Catering Depok | Catering Tangerang | Catering Bekasi | Catering Jakarta Murah | Catering Bogor Murah | Catering Depok Murah | Catering Tangerang Murah | Catering Bekasi Murah

Supplier Sayur | Supplier Buah | Hosting Gratis
Catering Surabaya
 | Catering Gresik | Catering Malang | Catering Mojokerto | Catering Jakarta | Catering Bogor | Catering Depok | Catering Tangerang | Catering Bekasi

Catering Surabaya | Catering Malang | Catering Gresik | Catering Mojokerto | Catering Jakarta | Catering Bogor | Catering Depok | Catering Tangerang | Catering Bekasi

ApTech Jakarta
  • Beranda
  • Catering Jakarta
  • Catering Bogor
  • Catering Depok
  • Catering Tangerang
  • Catering Bekasi
  • Teknologi

Menyimpan Gambar Offline Ke Browser Menggunakan imgcache.js

  • Mei 17, 2013
  • admin
0

SHARES

ShareTweet

Untuk sebuah aplikasi mobile berbasis Phonegap yang membutuhkan dan menampilkan suatu data gambar, terkadang developer perlu merlakukan optimasi performa konektivitas data dengan menyimpan gambar atau men-cache-nya ke dalam aplikasi. Salah satu cara yang cukup efektif agar gambar dapat tersimpan secara offline ke dalam aplikasi adalah menggunakan library imgcache.js. Library yang dibuat oleh Chrisben dari Prancis ini juga memanfaatkan API HTML5.

Download Source

Dengan mengaplikasikan imgcache.js ke dalam sebuah aplikasi mobile phonegap, maka konektivitas dan efektivitas untuk menampilkan data secara offline diharapkan akan lebih baik. Berikut adalah mekanisme imgcache.js saat menampilkan gambar secara offline :

  • Secara online, gambar akan terloading dari website dan tersimpan otomatis ke dalam browser atau aplikasi Phonegap
  • Kemudian jika user membuka browser atau aplikasi dalam kondisi offline, maka secara otomatis gambar yang telah tersimpan di browser akan terload.

Sederhana bukan? Baik, mari kita coba dengan membuat tutorial sederhana menggunakan library imgcache.js ini. Javascript yang diperlukan penulis dalam membuat tutorial ini adalah sebagai berikut :

  • JQuery 2.0 (mencoba Jquery versi terbaru)
  • library imgcache.js (https://github.com/chrisben/imgcache.js)
  • library imgloaded sebagai pendukung loading gambar.

Setelah meletakkan file-file library di atas pada folder localhost. Mari kita buat file index.html yang berisi source code utama imgcache.js. Pada praktik kali ini saya memanfaatkan browser Google Chrome. Atau anda bisa mendownload source yang telah saya buat sebelumnya melalui link sources di atas. Berikut adalah source code index.html :

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>HTML5 Image Cache Menggunakan imgcache.js</title>
<script type="text/javascript" src="jquery-2.0.0.js"></script>
<script type="text/javascript" src="jquery.imagesloaded.min.js"></script>
<script type="text/javascript" src="imgcache.js"></script>
<script>
 var startTest = function() {
  $('#gambar').imagesLoaded(function($images, $proper, $broken ) {
   // informasi debug
   ImgCache.options.debug = true;
   ImgCache.options.usePersistentCache = true;
   ImgCache.init(function() {
   // melakukan cache gambar dari kondisi online
   for (var i = 0; i < $proper.length; i++) {
   ImgCache.cacheFile($($proper[i]).attr('src'));
 }
 // melakukan replace gambar secara offline
 for (var i = 0; i < $broken.length; i++) {
 ImgCache.useCachedFile($($broken[i]));
 }
 });
});
};
 if (typeof(cordova) !== 'undefined') {
 // imgcache.js jika menggunakan phonegap
  document.addEventListener('deviceready', startTest, false);
 } else {
 // imgcache.js jika menggunakan browser
  $(document).ready(startTest);
 }
</script>
<body>
 <section>
  <hp>Buka file index.html menggunakan alamat url file:// jangan menggunakan http://</h3>
  <p>Secara otomatis gambar akan tersimpan di cache browser. Kemudian matikan internet</p>
  <p>Load kembali halaman ini.</p>
</section>
<section>
<div id="gambar">
  <img src="http://pic.mkhuda.com/gambar-cache.png">
</div>
</section>
</body>
</html>

Dari source code di atas, saya melakukan pemanggilan file gambar secara online dengan menggunakan tag <img src=””>. Dimana gambar tersebut sudah saya taruh di server hosting (http://pic.mkhuda.com/gambar-cache.png). Untuk memastikan gambar dapat tercache secara otomatis, kita harus mengetikkan alamat url dengan menggunakan penunjuk file:// karena pada praktik yang sebenarnya ini merupakan sebuah aplikasi phonegap.

pemanggilan file index

Pemanggilan file index

Di sini misalnya alamat localhost index.html terletak di file:///C:/xampp/htdocs/html5imgcache/index.html,. kemudian saya panggil melalui Chrome, maka notifikasi untuk melakukan storing data ke cache browser akan tampil. Klik Ok.

store data gambar ke browser ok

store data gambar ke browser ok

Setelah itu coba cek terlebih dahulu melalui tools Inspect Element di Google Chrome, bahwa gambar tersebut benar-benar terloading dari server online. Seperti gambar berikut :

inspect element sebelum offline

Inspect Element

Kemudian matikan koneksi internet Anda. Dan buka kembali file file:///C:/xampp/htdocs/html5imgcache/index.html secara offline. Maka gambar secara otomatis akan tampil melalui cache yang telah tersimpan di browser Google Chrome.

Mekanisme kerjanya cukup sederhana, jadi url gambar yang kita panggil tersebut akan diolah melalui imgcache.js dan imageloaded.min.js, kemudian setelah benar-benar tersimpan di cache browser, maka gambar akan secara otomatis tampil bilamana user dalam kondisi offline.

Download Source

Baca juga:

  1. Cara Memanipulasi Broken Image Menggunakan Javascript
  2. Tips Mempercepat Performa Aplikasi Phonegap
  3. Menyimpan String Data Dengan HTML5 Localstorage
  4. Aplikasi Android Phonegap Dengan Database SQLite
  5. Menampilkan Kondisi Online dan Offline Dengan HTML5
 
admin

Previous Article
  • Teknologi

Swasembada Internet

  • Mei 15, 2013
  • admin
View Post
Next Article
  • Teknologi

Mencicipi Clean Retina, Tema Responsive Untuk WordPress

  • Mei 18, 2013
  • admin
View Post

Tinggalkan Balasan Batalkan balasan

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

Pos-pos Terbaru
  • 8 HP Untuk Main Call of Duty Mobile Terbaik 2023
  • Game Esports Terbaik
  • Rekomendasi 10 Game Browser Terbaik
  • Aplikasi Pengunci Aplikasi Android Terbaik
  • 6 Smartwatch Terbaik 1 Jutaan Tahun 2022, Super Canggih!
Arsip
Kategori
  • Android
  • Aplikasi
  • Gadget
  • Game
  • Teknologi
  • Website
  • Windows
Wedding Organizer

Wedding Organizer Surabaya | Wedding Organizer Gresik | Wedding Organizer Malang | Wedding Organizer Madura | Wedding Organizer Mojokerto | Wedding Organizer Jakarta | Wedding Organizer Bogor | Wedding Organizer Depok | Wedding Organizer Tangerang | Wedding Organizer Bekasi

Partner

Catering Surabaya | Catering Gresik | Catering Malang | Catering Mojokerto | Catering Jakarta | Catering Bogor | Catering Depok | Catering Tangerang | Catering Bekasi | Catering Jakarta Murah | Catering Bogor Murah | Catering Depok Murah | Catering Tangerang Murah | Catering Bekasi Murah

External Link

Supplier Sayur | Supplier Buah | Hosting Gratis
Catering Surabaya
 | Catering Gresik | Catering Malang | Catering Mojokerto | Catering Jakarta | Catering Bogor | Catering Depok | Catering Tangerang | Catering Bekasi

Catering Surabaya | Catering Malang | Catering Gresik | Catering Mojokerto | Catering Jakarta | Catering Bogor | Catering Depok | Catering Tangerang | Catering Bekasi

Blog Teknologi Jakarta
Berita dan artikel teknologi dan Informasi Jakarta

Input your search keywords and press Enter.