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');
沒有留言:
張貼留言