Iframe Preloader

Saya ingin membahas mengenai pertanyaan dari The7Bloggers tentang bagaimana caranya menampilkan iframe pada kotak dialog, tapi isi dari iframe tersebut harus dimuat hanya saat kotak dialog ditampilkan:

The7Bloggers pada Alam Perwira di Membuat Kotak Dialog dengan jQuery:

Mas gimana kalau buat iframe, tapi waktu blognya load iframenya ndak ikut load?

Loadnya itu ketika tombol pembuka jQuery-nya di klik?

Pertanyaan bagus. Ini mengenai efisiensi muat halaman. Katakanlah, kita memiliki widget Buku Tamu tersembunyi di sidebar yang terbuat dari elemen <iframe>. Tapi kita harap kita bisa menunda pemuatan buku tamu tersebut sampai seorang pengunjung mengeklik tombol pembuka, tautan atau apapun yang menjadi pemicu tampilnya buku tamu tersebut.

Untuk memuat iframe pada saat suatu pemicu diklik dapat dilakukan dengan dua metode. Pertama, kita bisa membuat elemen <iframe> dengan atribut src kosong, lalu kita set nilai atribut src kosong tersebut saat sebuah tombol diklik:

HTML

<button>Klik!</button>
<iframe id='dynamicFrame' src=''><iframe>

jQuery

$('button').click(function() {
    $('iframe#dynamicFrame').attr('src', 'http://www.namasitus.com');
});

Ke dua, kita bisa menyisipkan elemen <iframe> pada sebuah kontainer (katakanlah #frameContainer) saat sebuah tombol diklik:

HTML

<button>Klik!</button>
<div id='frameContainer'><div>

jQuery

$('button').click(function() {
    $('#frameContainer').html('<iframe id="dynamicFrame" src="//www.namasitus.com"></iframe>');
});

Saya rasa metode yang ke dua ini lebih baik. Karena setidaknya, saat kita ingin membatalkan proses muat iframe, kita bisa melakukannya dengan cara menghilangkan elemen tersebut seperti ini:

$('button#batal').click(function() {
    $('iframe#dynamicFrame').remove();
});

Membatalkan proses muat iframe pada metode pertama sebenarnya juga bisa dilakukan dengan cara menghapus atribut src pada elemen tersebut:

$('button#batal').click(function() {
    $('iframe#dynamicFrame').removeAttr('src');
});

Tapi terkadang metode itu tidak bekerja dengan baik dan iframe masih tetap akan melanjutkan proses muat meskipun tombol pembatal sudah diklik.

Memadukan Konsep jQuery Dialog dengan Iframe Preloader

Sekarang kita akan meletakkan iframe tersebut ke dalam kotak dialog. Di sini Saya tidak akan mencari bahan terlalu jauh. Kita gunakan saja jQuery Dialog yang pernah Saya buat di posting ini untuk kemudian akan kita isi dengan elemen <iframe> di dalamnya.

Pertama-tama kita harus memodifikasi kerangkanya menjadi seperti ini:

<!-- Start Dialog Box -->
<div id="kotak-dialog">
<h3 class="title">Kotak Dialog<a href="#" class="close">&#215;</a></h3>
    <div class="isi-dialog"><div id="iframeContainer"></div>        <div class="button-wrapper">
            <button class="close">Tutup Kotak Dialog</button>
        </div>
    </div>
</div>
<div id="dialog-overlay"></div>
<!-- End Dialog Box -->

Pada kode di atas bisa Anda melihat bahwa Saya menyisipkan elemen #iframeContainer. Kita akan menggunakan itu sebagai tempat iframe yang akan kita sisipkan dengan jQuery. Berikutnya perhatikan kode ini:

//Tampilkan kotak dialog saat .open-dialog diklik
$('.open-dialog').click(function() {
    $('#kotak-dialog').show();
    $('#dialog-overlay').fadeTo("normal", 0.4);
    return false;
});

Kode tersebut hanya berfungsi untuk menampilkan kotak dialog dan overlay saat tombol pemicu (.open-dialog) diklik. tapi yang kita harapkan adalah setelah kotak dialog tampil, jQuery akan mencari elemen #iframeContainer di dalamnya dan setelah itu akan menyisipkan elemen <iframe> pada elemen tersebut. Itu bisa dilakukan dengan memodifikasi kodenya menjadi seperti ini:

$('.open-dialog').click(function() {
    $('#kotak-dialog').show().find('#frameContainer').html('<iframe src="' + this.href + '"></iframe>');
    $('#dialog-overlay').fadeTo("normal", 0.4);
    return false;
});

this.href adalah objek yang menyatakan nilai atribut href pada tautan yang diklik. Kita akan mengunakan pemicu berupa tautan agar kita bisa menyimpan URL iframe pada tautan tersebut, sehingga dengan satu kotak dialog saja, kita bisa membuka lebih banyak halaman di dalam iframe.

Untuk membatalkan proses muat tidak berbeda dari apa yang sudah Saya nyatakan di atas. Saat tombol .close diklik, sembunyikan kotak dialog dan singkirkan iframe:

// Saat tombol penutup diklik...
$('#kotak-dialog .close').click(function() {
    // Hilangkan kotak dialog dengan efek fade-out
    $('#kotak-dialog').fadeOut('normal', function() {
        // Setelah itu singkirkan iframe di dalamnya
        $('iframe', this).remove();
    });
    // Sembunyikan overlay
    $('#dialog-overlay').hide();
    return false;
});

Kode Selengkapnya

HTML

<!-- Start Dialog Box -->
<div id="kotak-dialog">
<h3 class="title">Kotak Dialog<a href="#" class="close">&#215;</a></h3>
    <div class="isi-dialog">

    <div id="iframeContainer"></div>

        <div class="button-wrapper">
            <button class="close">Tutup Kotak Dialog</button>
        </div>
    </div>
</div>
<div id="dialog-overlay"></div>
<!-- End Dialog Box -->

CSS

#kotak-dialog {
  position:absolute;
  top:20%;
  left:50%;
  margin:0px 0px 0px -200px;
  width:400px;
  height:auto;
  background-color:#fff;
  -webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
  -moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
  box-shadow:0px 1px 2px rgba(0,0,0,0.4);
  z-index:1000;
  display:none;
}

#kotak-dialog *:focus {
  outline:none;
}

#kotak-dialog h3.title {
  background-color:#3B5998;
  padding:10px 15px;
  color:#fff;
  font:normal 16px Arial,Sans-Serif;
  margin:0px 0px 0px 0px;
  position:relative;
}

#kotak-dialog h3.title a {
  position:absolute;
  top:10px;
  right:15px;
  color:#fff;
  text-decoration:none;
  cursor:pointer;
}

#kotak-dialog .isi-dialog {
  margin:15px;
  font:normal 12px Arial,Sans-Serif;
}

#kotak-dialog .button-wrapper {
  padding:10px 15px 0px;
  border-top:1px solid #ddd;
  margin-top:15px;
}

#kotak-dialog .button-wrapper button {
  background-color:#FF0C39;
  border:none;
  font:bold 12px Arial,Sans-Serif;
  color:#fff;
  padding:5px 10px;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
  cursor:pointer;
}

#kotak-dialog .button-wrapper button:hover {
  background-color:#aaa;
}

#dialog-overlay {
  position:fixed !important;
  position:absolute;
  z-index:999;
  top:0px;
  right:0px;
  bottom:0px;
  left:0px;
  background-color:#000;
  display:none;
}


/* Iframe */
#iframeContainer iframe {
  width:100%;
  height:300px;
  border:none;
  background-color:#ccc;
  overflow:auto;
}

jQuery

//<![CDATA[
$(function() {
    $('.open-dialog').click(function() {
        $('#kotak-dialog').show().find('#iframeContainer').html('<iframe src="' + this.href + '"></iframe>');
        $('#dialog-overlay').fadeTo(400, 0.8);
        return false;
    });
    $('#kotak-dialog .close').click(function() {
        $('#kotak-dialog').fadeOut('normal', function() {
            $('iframe', this).remove();
        });
        $('#dialog-overlay').hide();
        return false;
    });
});
//]]>

Elemen pemicu dibuat dengan sebuah elemen tautan yang memiliki kelas .open-dialog seperti ini:

<a class="open-dialog" href="//www.namasitus.com">Buka Kotak Dialog</a>

Lihat Demo