超豐盛電子書!www.apress.com

An Alpha eBook is a pre-release, still-in-development version of an Apress title. Get a first look at these Alpha eBooks below!

學習基本的jQuery區塊建構

Try jQuery is a combination of videos, interactive console challenges, and writing code in the browser. You'll need about 2 hours of time to make it through everything.

Lazy Load-延遲載入網頁圖片

lazyload  

這個外掛用來「延遲載入圖片」,也就是說當網頁開啟以後,僅載入視線所及的範圍內的圖片,在畫面以外的圖片先暫時不載入,當捲動捲軸看到圖片所在的位置時,才開始載入那張圖片。

這樣做對於網頁使用者的好處是:

(1)當網站要顯示的圖片過多的時候不會造成資料擁擠,也不會使你家的網路塞車,造成有些圖片無法顯示必須重新按下F5重新載入的窘境。

(2)對於開發者而言,也可以避免一瞬間的流量暴衝,而導致伺服器無法負荷。

光是這兩個優點利多(最近看股票看太多的後遺症XD),我就會建議大家沒事的時候為你的網站加上這個外掛。  

lazyload:http://www.appelsiini.net/projects/lazyload  

Demo:http://www.appelsiini.net/projects/lazyload/enabled_fadein.html

ps:使用的時候記得要有jQuery,這個plugin使用的方式很簡單,將js加入網站,接著加入以下語法就可以了。  

$("img").lazyload();

如果想用fadeIn特效來顯示圖片也可以加上一些設定參數,如下:

$("img").lazyload( { effect : "fadeIn" } );

事實上lazyload預設的特效是show,也就是沒有特效直接顯示,作者也沒有特別說明還可以使用哪些特效,但是你可以透過jQuery文件找到其他特效的名稱,像是slideDown、slideUp等當作輸入參數,如下:

$("img").lazyload( { effect : "slideDown" } );

 

原文:http://blog.finalevil.com/2009/10/jquery01lazy-load.html

(Will 保哥) JavaScript 開發實戰:效能調校與常見陷阱

本影片是多奇數位創意有限公司於 2013/05/17 在公司內部的技術分享錄影,主講人是 Will 保哥,主要內容是 Will 保哥在 2013 JSDC.tw 演講主題【JavaScript 開發實戰:效能調校與常見陷阱】,當中分享許多 JavaScript 效能調校的基本步驟與工具,最後並分享一些實務上在撰寫 JavaScript 的過程中常見的誤解與陷阱。