Tutorial Cara Lancarkan/Ringankan Page Blog Dengan jQuery Lazy

ImageShack, free image hosting, free video hosting, image hosting, video hosting, photo image hosting site, video hosting site

Hai all...Hari ini koz nak kongsi ilmu baru dengan korang,terutama pada blog sesiapa yang mengalami masalah loading yang agak lama untuk membuka blog.Cara mengatasinya adalah dengan mengunakan plugin jquery.Apa kegunaan plugin ini?Kegunaan plugin jquery adalah untuk mengatasi masalah loading pada blog yang mempunyai gambar/picture yang banyak atau beraiz besar.Dengan mengunakan plugin jquery ini,jika di scroll.Gambar-gambar yang akan di pamirkan akan mengalami proses loading tanpa menganggu loading page blog anda.Maksudnya page blog anda akan loading secara lancar dengan loading gambar menyusur selepas itu.Sebagai contoh anda boleh lihat pada blog koz ini...Setiap gambar akan menjadi kelabu dahulu and selepas page di buka barulah gambar terpapar satu persatu.Ingin cuba membuatnya?Senang sahaja,ikuti lagkah-langkah di bawah:-

Langkah 1

Layout>Page Elements>Add a Gadget>HTML/Javascript

Langkah 2

Kosongkan pada tajuk widget dan kemudian copy paste code di bawah

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type='text/javascript' src='https://sites.google.com/site/jquery01/jquery.lazyload.mini.js?ver=1.5.0'></script>
<script type="text/javascript">
jQuery(document).ready(function($){
if (navigator.platform == "iPad") return;
jQuery("img").lazyload({
effect:"fadeIn",
placeholder: "http://img838.imageshack.us/img838/2931/loadingpagebudaknakal.jpg"
});
});
</script>


Save dan lihat hasilnya...

Camat mencuba....
Ranking: 5

Comments:18

05 September, 2010 11:46

koz, nak tanya. ni letak kat bahagian mana?

05 September, 2010 12:02

hoho...da jumpa. tapi ada masalah skit. img kat side bar dpt gambr loading je...

05 September, 2010 21:13

nak taw nie..tajuk wdget?cmne?

05 September, 2010 21:22

opsss....maap ada kesilapan sedikit...hihihi koz dah edit....sila ikut langkah2 terkini^^

05 September, 2010 21:23

p/s: kalau korang taknak image tu korang boleh tukar ngan image yang korang suka...^^

05 September, 2010 21:48

macam x de effect pon..

05 September, 2010 21:50

koz, boleh buat x tutorial cara nk pasang feedburner?

07 September, 2010 08:04

berjaya ! (:
thnx koz !

11 September, 2010 15:21

Wahh, Dah Ringan ... Huk3 ^_^

Koz, Wat La Plak Tutorial Nak RinganKan Badan Orang ^__^

17 September, 2010 01:53

tq koz...dah buat...hihi..
*ada x cara nk tukar sidebar dari kiri ke kanan..??

15 October, 2010 13:21

kenape gmbar kat sidebar loading je? -___-

03 December, 2010 16:50

salam singgah.. sy cuma nk sampaikan satu berita sahaja. sila lihat sini http://www.appelsiini.net/projects/lazyload

"Lazy Load is currently not usable. It does not work with the latest browsers as expected. I have currently no time updating the code myself. Patches are always welcome. If you find a solution just fork and send a pull request. Thanks!"

08 December, 2010 15:12

berjaya , thx :)

22 January, 2011 05:03

Salam 'alaik..
suka sangat2 dgn blog ni...
mekaseh atas prkongisan.. ^_^

13 February, 2011 01:14

i take it..tq ya!

26 March, 2011 14:06

dah wat..
tq... ^_^

02 July, 2011 13:35

tak jadi pun :b:

06 July, 2011 00:40

nak tanya sikit boleh ? hehe
kat blog saye takde LAYOUT , mcm mane nak ikut tutorial ni ek ? :D

Post a Comment

Komehlah dan klik G+ di atas sekali okey^^

 
Google PageRank Checker Powered by  MyPagerank.Net