Guides Terkini Tentang Cara Membuat Progressive Image Loader

Pernah membuka atau mengunjungi situs webnya Medium ? Bagaimana cara membuat gambar pada situs web atau blog kita bisa seperti yang terlihat pada situs medium tersebut ?. Gambar yang ngeblur saat pertama kali kita buka situs tersebut namannya adalah Progressive Image Loader. Dan kali ini kita akan belajar bagaimana cara membuat Progressive Image Loader sama seperti yang terlihat pada situs web Medium.

Progressive image loader adalah cara yang tepat dan mudah untuk meningkatkan kecepatan situs web anda. Di buat dengan sedikit potongan kode css dan javascript. Kompatibel dengan browser modern dan pastinya sangat mudah untuk di terapkan pada blog anda.

Jika anda tadi pertama kali mengunjungi blog Ramai Beud pasti melihat gambarnya burem atau blur. Dan ketika beberapa saat kemudian baru muncul versi yang jelasnya. Bisa saja kita membuat dengan hanya menggunakan css saja, namun untuk menunjang kecepatan loading situs web atau blog kurang bagus. Jadi untuk penerapannya, kita akan buat dengan tambahan javascript yang bisa berfungsi sekaligus sebagai lazy load image.

Baiklah, langsung saja kita mulai membuat Progressive Image Loader seperti situs Medium sebagaimana yang saya sebutkan di atas.

Membuat Progressive Image Loader dengan CSS dan Javascript

Optimasi Blog dalam hal kecepatan loading juga bisa menigkatkan SEO untuk blog kita. dan saat ini google sendiri juga telah sering berkampanye tentang optimasi kecepatan loading situs web agar bisa dengan mudah berada di halaman pertama google.

Ramai Beud adalah blog yang masih terbilang baru dan memang blog ini saya dedikasikan untuk bahan praktek tentang optimasi blog. Bukan hanya blogspot, saya juga sedang mendalami dalam hal optimasi kecepatan situs web atau blog berbasis wordpress. Dan lumayan, untuk wordpress sedikit banyak sudah ada kemajuan yang terlihat.

Intinya, mau blogspot ataupun wordpress jika di pelajari lebih mendalam akan menjadi mudah untuk di pahami. Loh, kok jadi ngelantur, :).

Kembali ke Progressive Image Loader, Bagaimana cara membuat dan menerapkannya pada blogspot ?

Baiklah, mari kita mulai membuat file cssnya terlebih dahulu :

/* progressive image CSS */
.progressive {
position: relative;
display: block;
overflow: hidden;
outline: none;
}

.progressive img {
display: block;
width: 100%;
max-width: none;
height: auto;
border: 0 none;
}

.progressive img.preview {
filter: blur(2vw);
transform: scale(1.05);
}

.progressive img.reveal {
position: absolute;
left: 0;
top: 0;
will-change: transform, opacity;
animation: progressiveReveal 1s ease-out;
}

@keyframes progressiveReveal {
0% { transform: scale(1.05); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}

Kemudian kita buat file Javascriptnya :

// progressive-image.js
if (window.addEventListener && window.requestAnimationFrame && document.getElementsByClassName) window.addEventListener('load', function() {

// Mulai
var pItem = document.getElementsByClassName('progressive replace'), timer;

window.addEventListener('scroll', scroller, false);
window.addEventListener('resize', scroller, false);
inView();


// Mengubah Ukuran ketika di Scrool
function scroller(e) {

timer = timer || setTimeout(function() {
timer = null;
requestAnimationFrame(inView);
}, 300);

}


// Memuat Gambar kecil
function inView() {

var wT = window.pageYOffset, wB = wT + window.innerHeight, cRect, pT, pB, p = 0;
while (p < pItem.length) {

cRect = pItem[p].getBoundingClientRect();
pT = wT + cRect.top;
pB = pT + cRect.height;

if (wT < pB && wB > pT) {
loadFullImage(pItem[p]);
pItem[p].classList.remove('replace');
}
else p++;

}

}


// Merubah ukuran Gambar menjadi besar kembali
function loadFullImage(item) {

if (!item || !item.href) return;

// Proses Load Gambar
var img = new Image();
if (item.dataset) {
img.srcset = item.dataset.srcset || '';
img.sizes = item.dataset.sizes || '';
}
img.src = item.href;
img.className = 'reveal';
if (img.complete) addImg();
else img.onload = addImg;

// Replace Gambar
function addImg() {

// Mematikan Klik pada url Gambar
item.addEventListener('click', function(e) { e.preventDefault(); }, false);

// Menambah ukuran penuh Gambar
item.appendChild(img).addEventListener('animationend', function(e) {

// Menghapus ukuran gambar kecil
var pImg = item.querySelector && item.querySelector('img.preview');
if (pImg) {
e.target.alt = pImg.alt || '';
item.removeChild(pImg);
e.target.classList.remove('reveal');
}

});

}

}

}, false);

Dan yang terakhir kita terapkan dalam tag img untuk template blogspot anda.

<a href="https://ucarecdn.com/718f79c5-2868-41c8-b56e-c87237674adb/-/resize/500x/man.jpg" class="full progressive replace">
<img src="https://ucarecdn.com/718f79c5-2868-41c8-b56e-c87237674adb/-/resize/32x/man.jpg" class="preview" alt="man" />
</a>

Jika sudah selesai semua, silahkan anda simpan dan coba lakukan refresh pada halaman homepage blogspot anda. Jika berhasil, berarti anda telah benar melakukannya, dan jika tidak ada tanda tanda berhasil, coba cek lagi penerapan kodenya.

Sampai disini sudah bisa di pahami ? Jika masih ada yang belum di pahami bisa menanyakannya melalui kolom komentar di bawah ini.

Demikianlah, semoga berkenan dan bermanfaat, dan Apabila artikel Cara Membuat Progressive Image Loader seperti situs Medium ini menurut anda berguna, silahkan bagikan kepada pengikut anda di sosial media. Sampai ketemu lagi di lain kesempatan. 

0 Response to "Guides Terkini Tentang Cara Membuat Progressive Image Loader"

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel