Iframe preloader with css3 and javascript

iframe preload with javascript and css3

Dulu aku pernah baca mengenai iframe preloader diblog DTE dan disana codingnya memanfaatkan jquery lalu setelah lama berEksperimen menggunakan kode javascript akhirnya finish juga kode yang aku tulis, eh sebenernya bukan nulis kodenya yg finish, tapi mikirin kesalahan kodenya yang agak lama hehehe begini nih kalau namanya belajar, otak dibuat pusing.

ILUSTRASI

#bungkus {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    -moz-transition: all 1s linear;
    -o-transition: all 1s linear;
    -webkit-transition: all 1s linear;
    transition: all 1s linear;
    z-index: 9999
    }

#bungkus iframe {
    border: 0;
    position: absolute;
    top: 20px;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 96%
    }
#bungkus .hilang {
    text-align: center;
    cursor: pointer;
    background: #252424;
    color: #E00
    }
/* CSS Transfer */
.tampil {
    visibility: visible;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    -webkit-transform: scale(1) rotate(0deg);
     -moz-transform: scale(1) rotate(0deg);
      -ms-transform: scale(1) rotate(0deg);
       -o-transform: scale(1) rotate(0deg); 
          transform: scale(1) rotate(0deg);
    }

.hidden {
    visibility: hidden;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transform: scale(0) rotate(90deg);
     -moz-transform: scale(0) rotate(90deg);
      -ms-transform: scale(0) rotate(90deg);
       -o-transform: scale(0) rotate(90deg); 
          transform: scale(0) rotate(90deg);
    }

.awal {
    display: none
    }

.lanjut {
    display: block
    }
/* Batas Css Transfer */

Simpan css diatas ]]></b:skin>

<div id='bungkus' class='hidden'>
<div class='hilang' onclick='sembunyi();'>&#10006;</div>
<iframe id='iframe' class='awal'></iframe>
</div>

Simpan kode htmlnya dibawah <body>

<script type="text/javascript">
//<![CDATA[
// ZTO CREATION
// http://zhinto.blogspot.com/
function tampil(){
var x = document.getElementById('ifr'), //Link
    p = document.getElementById('bungkus'), //bungkus iframe
    b = document.getElementById('iframe'); //Iframe
p.className = 'tampil';
b.className = 'lanjut';
b.src = x.href;
}
function sembunyi(){
var p = document.getElementById('bungkus'), //bungkus iframe
    b = document.getElementById('iframe'); //Iframe
b.className = 'awal';//Ganti class iframe dengan .awal
//Hapus Nilai src iframe agar iframe tidak terus meLoad nilai src iframe
b.src = '';
//Ganti nilai class #bungkus dengan .hidden
p.className = 'hidden';
}
//]]>
</script>

Simpan javascriptnya diatas </head>
Kode Pemanggilnya seperti dibawah ini.

<a id="ifr" href="http://link-anda.com" onclick="tampil();return false;">Cek</a>

Kode yang aku Tandai harus selalu ada pada link yang akan terbuka pada iframe, karena itu adalah kode pemanggil javascriptnya. kodenya bisa kita gunakan dimana saja bisa pada menu atau postingan atau sidebar yang penting kita harus ingat untuk menempatkan kode yang aku Tandai

UPDATE :
Penggunaan link lebih dari satu kita tinggal mengganti javascript dan HTML pemanggilnya dengan kode dibawah ini

<script type="text/javascript">
//<![CDATA[
function tampil(obj){
var p = document.getElementById('bungkus'), //bungkus iframe
b = document.getElementById('iframe'); //Iframe
p.className = 'tampil';
b.className = 'lanjut';
b.src = obj.href;
}
function sembunyi(){
var p = document.getElementById('bungkus'), //bungkus iframe
    b = document.getElementById('iframe'); //Iframe
b.className = 'awal';
b.src = '';
p.className = 'hidden';
}
//]]>
</script>

<a href="http://link-satu.com" onclick="tampil(this);return false;">Satu</a>
<a href="http://link-dua.com" onclick="tampil(this);return false;">Dua</a>
<a href="http://link-tiga.com" onclick="tampil(this);return false;">Tiga</a>

Selalu ingat kode yang saya Tandai