Re: 关于lazyload的提案

$)A<<JuK.F=SPO^#,V;D\5%4?V'3V#,H7J5JG8v2;4m5DLaRi!#




Regards, 
 
RIASKY / $)ANd=\

Email: riasky@msn.com / twitter$)A#:@riasky



$)ATZ 2012-2-13#,OBNg5:35#, 3L[?7G P45@#:

> $)A<<JuIOLVB[2;IYAK `E 5%4?5XV'3VR;OB0I O#M{Wi@o5DM,Q'7"7"QTJ2C45D
> 
> $)ATZ 2012Dj2TB13HU OBNg5:29#,Huan Du <dh20156@gmail.com>P45@#:
> 
> Looping Franky
> 
> 
> ---------- $)ARQW*7"SJ<~ ----------
> $)A7"<~HK#: Huan Du <dh20156@gmail.com>
> $)AHUFZ#: 2012Dj2TB13HU OBNg5:22
> $)AVwLb#: 9XSZlazyload5DLa08
> $)AJU<~HK#: public-html-ig-zh@w3.org
> $)A3-KM#: 3L[?7G <csf178@gmail.com>, "Kang-Hao (Kenny) Lu" <kennyluck@w3.org>, otakustay@gmail.com
> 
> 
> 
> Hi All,
> 
> $)A=|HU#,!0WEB1jW<7-RkSk91OW!1QQH:3IT1OrWHATWGLa=;AKR;8v9XSZlazyload5DLa08!#
> 
> $)AHg4s<RKyV*#,WEB5D7"U9RQ>-HC8|6`5DHKHON*#,?IRTM(9}K|TZ;%A*MxIO44=(T=@4T=7a8;5DDZH]:MS&SC#,5+JGJ\O^SZD?G05DMxBg;7>3#,NRCGTZ44=(S&SCJ1PhR*>!?ID\6`5XH%?<BGPTD\NJLb#,1HHg#,M<F,5DQS3Y<STX!#
> 
> $)ATZR;P)7CNJA?>^4s5DS&SCVP#,NRCGM(3#PhR*=+2;TZ!1?IJS76N'!0DZ5DM<F,=xPPQS3Y<STX5D4&@m#,RT1cU{8vR3CfD\9;8|?l5D3JOV8xSC;'#,2"GR=ZJ!4x?m!#51G0#,6`J}5DWv7(4s8E?IRTW\=aHgOB#:
> 
>  $)A:s6KJd3vHTMLJ1#,KySPPhR*LazyLoad5D<img>1jG)5DsrcJtPTIhVCN*R;UE1x15DM8Cw5DgifM<F,#,Hgtransparent.gif#,2"=+UfJ55DM<F,5XV7IhVCTZdata-srcJtPTIO
> <img src="/images/transparent.gif" data-src="/images/real.png" />
> $)A<`L}window.onscrollJB<~
> window.onscroll = lazyLoadImages;
> $)ATZJB<~VP#,UR3vKySPPhR*LazyLoadGRTZ?IJSGxSrVP5D<img>1jG)#,2"IhVCFdsrcJtPTN*T$OH4f4"5Ddata-srcJtPT!#
> function lazyLoadImages() {
>     var images = document.getElementsByTagName('img');
>     for (var i = images.length - 1; i >= 0; i--) {
>         var image = images[i];
>         var src = image.getAttribute('data-src');
>         if (src && isVisible(image)) {
>             image.src = src;
>             image.removeAttribute('data-src');
>         }
>     }
> }
> 
> function isVisible(element) {
>     var style = window.getComputedStyle(element, null);
>     if (style.getPropertyValue('display') === 'none') {
>         return false;
>     }
>     if (style.getPropertyValue('visibility') === 'hidden') {
>         return false;
>     }
> 
>     return isInViewport(element);
> }
> $)AS&SCUbVV=b>v7=08#,NRCGH7J5?IRT=b>vQS3Y<STX5DNJLb#,2;9}UbFdVP;aSv5=5DNJLbR22;IY#:
>  onscroll $)A2;:C$)GSSj+$)A#,GRSC5=boundingClientRect5H;aR}FpG?VFLayout#,S0OlPTD\
>  $)AN^7(R@??d/@@Fw5D8|6`WJT4@4=xPP2_BT5DQ!Tq#,Hg#:
>  Reflow/Repaint$)A2;F571J1D,HO6`<STXM<F,
>  $)AMxBgLu<~A<:C#,4x?mJ#S`=O6`J1WT6/<STXM<F,
>  $)A8y>]SC;'5Dd/@@O09_#,6`<STX1-2FA5DJ}>]
> $)AUbJ1#,NRCG>MHL2;W!R*Ok#,Hg9{HTML;rDOMVPD\9;La9)R;P)PB5DLXPTH%6T4KWw3vV'3V#,DG?ID\;aJGR;<~:\:C5DJBGi#!
> $)ASPC;SP1XR*DX#?NROk#,R;GPD\9;6TWEB7"U9Fp5=;}<+U}CfWwSC5D8DIF#,6<JGSPRbRe5D!#SZJG#,M(9}4s<R5DLVB[#,NRCG3u2=La3vAKRTOB<85cLa08#:
> 
> 
> 
> $)A7=081. Tv<Sonscrollintoview:MonscrolloutofviewJB<~ 
> 
> $)A8xElementLm<S28vJB<~#:
> 
>  onscrollintoview$)A#:519v6/Lu9v6/:s#,T*KX=xHk5=?IJSGxSrJ14%7"
>  onscrolloutofview$)A#:519v6/Lu9v6/:s#,T*KX@k?*?IJSGxSrJ14%7"
> 
> $)A7=082. Tv<SDOMVisibilityChangedJB<~ 
> 
> $)A8xElementTv<SR;8vMutation Event#,C{N*DOMVisibilityChanged#,TZT*KXBzWcRTOBLu<~J14%7"GRvisibilityN*true#:
> 
> 
>  $)AT*KX5DBoundingClientRectSk?IJSGxSrO`=;
>  $)AT*KX5DdisplayQyJ=7Gnone
>  $)AT*KX5DvisibilityQyJ=7Ghidden
> $)A51RTIOHNR;Lu<~8D1dJ1#,4%7"JB<~#,GRvisibilityN*false
> 
> 
> $)A7=083. N*KySP<STXMb2?WJT45DT*KX<SHkdeferJtPT 
> 
> $)A8xPhR*<STXMb2?WJT45DT*KX#,Hgimg!"iframe5H<STXR;8vdeferJtPT
> 
> defer$)AJtPTN*Boolean Attribute#,N*trueJ11mJ>TZd/@@FwSE;/5DLX6(Gi?vOB2E?*J<<STX#,0|@(#:
> 
>  $)ATZ?IJSGxSr;r?IJSGxSrMb#(VnHg#)1FA76N'DZ
>  $)AT*KX?I<{#(display/visibility#)
>  $)A4x?mSP?US`
>  $)AR3Cf51G0Layout/Paint2;F571#,SPWc9;?US`@4Mj3IM<F,/iframe5DdVH>
> 
> 
> $)A7=084. N*KySP<STXMb2?WJT45DT*KX<SHkdeferpolicyJtPT 
> 
> deferpolicy$)AJtPTJGR;8vEnumrable Attribute#,V5SPRTOB#:
> 
> 
>  visibile$)A#:=xHk?IJSGxSrJ1<STX
>  network-idle$)A#:51MxBg?UOPJ1<STX
>  render-idle$)A#:51dVH>?UOPJ1<STX
> $)ARTIO9fTr?IHNRbWi:O#,N^4KJtPTTrJSN*A"?L<STX
> 
> 
> $)AO^SZDZH]F*7y#,8|OjO8DZH]GkRF2=#:http://www.w3.org/html/ig/zh/wiki/Proposals/img_lazyload
> $)ATZ4K7"KM4KSJ<~5DD?5DJGO#M{P!WiVP8|6`HKD\9;?45=2"2NSk5=6T4KLa085DLVB[VP@4#,Hg9{DcSPHN:NRb<{;r=(Ri#,NRCG7G3#FZM{Sk4s<RR;FpLVB[!#
> $)A8PP; Kenny Luck, GZhang, Franky, Winter<0FdK{8wN;5D91OW!#
> Regards,
> $)A6E;6
> 
>