Bagaimana Mengecualikan Imej di Sidebar daripada Efek Lazy Load

Sebelum ini saya pernah menggunakan jQuery Image Lazy Load. Tapi terpaksa deactivate semula plugin tu disebabkan ia tidak dapat berfungsi mengikut apa yang saya inginkan. Masalah paling utama, kadangkala imej/gambar di bahagian sidebar terlalu lambat untuk dipaparkan dan kadangkala tidak kelihatan langsung (hanya imej preloading warna kelabu yang nampak!). Petang semalam, setelah membuat beberapa adjustment, plugin ini akhirnya berfungsi mengikut apa yang saya inginkan. jQuery Image Lazy Load hanya berkesan pada content dan tidak pada sidebar. Dengan ayat yang mudah “Exclude Sidebar Images from Lazyload”. Kiranya imej di sidebar telah dikecualikan daripada effect lazy load. Jadi alang-alang dah penat buat, baik saya kongsikan di sini mana tahu ada yang berminat untuk menggunakan plugin ni.

Sebelum tu, berikut adalah sedikit maklumat tentang plugin berkenaan. jQuery Image Lazy Load adalah salah satu plugin untuk WordPress yang berfungsi untuk menangguh proses paparan imej/gambar pada halaman blog. Kelebihan plugin ni, ia dapat melajukan proses loading halaman walaupun halaman berkenaan mengandungi banyak gambar. Sebabnya plugin ni mempunyai fungsi penangguhan dengan memaparkan imej preloading (warna kelabu). Penangguhan bukan bermaksud proses paparan jadi lambat, tetapi imej/gambar hanya akan dipaparkan pada masa ia diperlukan.

Lazy loader delays loading of images in (long) pages. Images below the fold (far down in the page) wont be loaded before user scrolls down.

This is opposite of image preloading. Using lazy load on long pages containing heavy image content makes page feels snappier. Browser is in ready state after loading visible images. No need to wait for unknown amount of pictures to load.

Sebelum ubahsuai skrip, pertama sekali kita download jQuery Image Lazy Load plugin dan install sama ada melalui admin panel atau FTP. Kemudian aktifkan plugin tu. Setelah itu, klik pada butang edit plugin (Plugins>Editor). Lihat pada fail: jquery-image-lazy-loading/jq_img_lazy_load.php. (Jika melalui admin panel/cpanel, buka fail: /public_html/wp-content/plugins/jquery-image-lazy-loading/jq_img_lazy_load.php) kemudian cari kod seperti berikut:

jQuery(document).ready(function($){
  if (navigator.platform == "iPad") return;
  jQuery("img").lazyload({
    effect:"fadeIn",
    placeholder: "$placeholdergif"
  });
});

Gantikan kod berwarna merah di atas dengan kod berikut:

jQuery("#content").not("#sidebar").find("img").lazyload({

Walau bagaimanapun, ada satu perkara yang perlu anda dipastikan sebelum memasukkan kod biru di atas. Pastikan fail stylesheet (style.css) template yang sedang anda gunakan mempunyai kod (1) #content dan (2) #sidebar. Ini sangat penting sebab tidak semua template mempunyai kod/skrip yang sama. Misalnya untuk template yang saya gunakan sekarang (Redmudah), kod yang digunakan adalah #content-container, maka kod inilah yang perlu dimasukkan.

Jika kedua kod di atas telah dimasukkan dan plugin gagal berfungsi, atau ia berfungsi tetapi masih memberi effect pada imej di sidebar, gantikan kod #content dengan kod yang sesuai. Sebagai contoh, untuk template yang saya gunakan sekarang ini, saya telah memasukkan kod:[  jQuery(".content").not("#sidebar").find("img").lazyload({ ] untuk membolehkannya berfungsi.

Seterusnya, boleh juga cuba masukkan kod di bawah untuk membolehkan lazy load berkesan pada sesetengah bahagian-bahagian yang kita kehendaki sahaja. Contohnya:

jQuery("#content #header #footer").not("#sidebar").find("img").lazyload({

jQuery("#content").not("#sidebar #header #footer").find("img").lazyload({

Jika berminat menggunakan fungsi lazy load seperti yang turut digunakan Masable tu, bolehlah download di sini.

• Share
• Tweet

Terima kasih kepada semua pembaca Kulanzsalleh.com. Semua Artikel di blog ini adalah berdasarkan pandangan peribadi saya sendiri melainkan artikel berbentuk ilmiah, berita, petikan dan perkongsian lain yang tiap satunya akan saya nyatakan sumber asalnya (Baca Terma & Syarat). Jika anda dapati artikel di blog ini bermanfaat, anda boleh kongsikan kepada pembaca lain di FACEBOOK atau TWITTER.