Search

5/17/2008

yui image lazy load using class name

.yui-imgload-somegroup { background:none !important; } 
...

...
someGroup.className = 'yui-imgload-somegroup';

1. 把所有要受到 image lazy loader 的 image 給予一個 class name
2. 在 css 加上 backgrond:none !important,這樣一開始便不會 load 那張 image
3. 聰明地方在,他把 image 設在 background-image 裡面,這樣的好處只需要通通給一個 class name, 不需要每一個都取一個 id。

兩個 example:
above fold:
http://chunghe.googlecode.com/svn/trunk/project/image.lazy.loader.by.class.name/above.fold.htm
below fold:
http://chunghe.googlecode.com/svn/trunk/project/image.lazy.loader.by.class.name/below.fold.htm

注意裡面有一張空的圖片http://us.i1.yimg.com/us.yimg.com/i/us/tr/b/1px_trans.gif,而且一定要有

js

var scrollGroup = new YAHOO.util.ImageLoader.group(window, 'scroll');
scrollGroup.className = 'yui-imgload-scrollgroup';
scrollGroup.foldConditional = true;
scrollGroup.addTrigger(window, 'resize');

沒有留言: