- From: John Hax <johnhax@gmail.com>
- Date: Sun, 27 Oct 2013 21:31:39 +0800
- To: "Kang-Hao (Kenny) Lu" <kanghaol@oupeng.com>
- Cc: (wrong string) 興趣小組 <public-html-ig-zh@w3.org>
- Message-ID: <CAEeYXHU7Y0-mxa1AbzuD9aanmSwrOTnweh_fZUede--fG4jB8w@mail.gmail.com>
寮勪釜琛ㄦ牸鏇存竻妤氾細
@src=a
@srcset=b 2x c 1x
.src = d
.srcset = e 2x f 1x
瀵瑰簲锛
1x 2x
@src a(1) none(1)
@srcset c(5) b(5)
.src d(?) none(?)
.srcset f(?) e(?)
鎷彿閲屾槸浼樺厛绾с
2013/10/27 John Hax <johnhax@gmail.com>
>
>
>
> 2013/10/25 Kang-Hao (Kenny) Lu <kanghaol@oupeng.com>
>
>> (2013/10/25 21:52), John Hax wrote:
>>
>> > 1鐨勬柟娉曟槸鎶奿mg.src鏄庣‘涓烘渶缁堟樉绀虹殑鍥剧墖锛屼篃灏辨槸鎺掗櫎浜嗗悓鏃惰缃畇rcset/src
>> > 鐨刢ase銆備篃灏辨槸璇村鏋滄墜鍔ㄨ缃簡src锛屽氨瑕嗙洊浜唖rcset鐨勮缃
>>
>> 濡傛灉鎴戞病寮勯敊浣犵殑鎰忔濄備綘鐨勬剰鎬濇槸鍦ㄨ繖涓柟娉曚腑
>>
>> img.src = "picture-1.png";
>> img.srcset = "picture-2.png 2x";
>>
>> 鍦 window.devicePixelRatio = 2 鐨勬祻瑙堝櫒閲岋紝鍥犱负 .src 瑕嗙洊浜 .srcset 鐨勮
>> 缃紝鎵浠ユ樉绀虹殑鍥剧墖鏄 "picture-1.png"锛
>>
>
>
> 姝ｆ槸濡傛銆備絾濡傛灉閬靛惊鎴戞墍璧炲悓鐨勬柟妗堬紝鍦ㄥ疄闄呭紑鍙戜腑鏄繖鏍峰啓鐨勶細
>
> if ('srcset' in img) img.srcset = 'pic2.png 2x, pic1.png 1x'
> else img.src = 'pic1.png'
>
> 鎵浠ヤ笉浼氬嚭鐜板湪鏀寔srcset鐨剅atio涓2鐨勬祻瑙堝櫒閲屾樉绀簆ic1鐨勯棶棰樸
>
>
>
>> > 鏈鍚庯紝浣跨敤鏀寔srcset鐨勫簱銆傝剼鏈鏀瑰彉鍥剧墖锛屽彧鎿嶄綔srcset锛屼笉鎿嶄綔src銆
>>
>> 杩欓噷鏈変釜闂锛岀収 1) 璺熶綘璇 鈥滃彧鎿嶄綔srcset鈥 鐨勯昏緫锛屽鏋滀綘鐢ㄧ殑搴撶殑鎯呭舰鏄
>>
>> HTML <img src=xxx srcset=xxx />
>> + 涓嶆敮鎸 srcset 鐨 JS 搴 1 璁剧疆浜 .src
>> + 鏀寔 srcset 鐨 JS 搴 2 璁剧疆浜 .srcset
>>
>> 閭ｈ繖涓椂鍊 JS 搴 2 浼氫笉璧蜂綔鐢ㄣ傛敮鎸 .srcset 鐨 JS 搴撶殑瀹屾暣姝ｇ‘鍐欐硶鏄
>>
>
>
> 姝ｆ槸濡傛銆傝繖閲岀殑鎯虫硶鏄紝铏界劧srcset涓嶈捣浣滅敤浜嗭紝浣嗘槸鑷冲皯鍔熻兘鏄彲鐢ㄧ殑锛屾棤闈炴槸閫鍖栧埌鍙湁src鐨勬儏鍐点備絾鍙嶈繃鏉ョ殑鎯呭喌灏辨湭蹇呰兘鎺ュ彈浜嗭紝鍥犱负瀹冨鑷村師鏈彲浠ョ敤鐨勫姛鑳藉け鏁堜簡锛堟敼鍙.src锛屽浘鐗囧嵈涓嶅彉锛夈
>
>
>>
>> img.src = null;鈥
>> img.srcset = 鏂板;
>>
>
>> 锛岃涓嶅氨鏄祵涓嶄細杩炵画鐢ㄥ埌涓や釜鏀 .src/.srcset 鐨勫簱锛堝疄闄呬笂杩欑鎯呭喌鐨勭‘寰堝皯锛夈
>>
>
> 涓嶆槸璧岋紝鑰屾槸瀹為檯寮鍙戜腑搴旇涓嶄細鍑虹幇杩欐牱鐨勬儏鍐碘斺斿鍚屼竴寮犲浘鐗囧悓鏃剁敤鏀.src鐨勮佺殑搴撳拰鏀.srcset鐨勬柊鐨勫簱銆
>
> 鎴戣涓哄疄闄呬笂瀹规槗鍑虹幇鐨勬儏褰㈡槸锛
> 1. 鍐呭杩涘寲鍒颁簡鐢@srcset锛屼絾搴撹繕鏄佺殑
> 2. 浠庤佺殑搴擄紙鐢╥mg.src锛夎浆鎹㈠埌鏂扮殑搴擄紙鐢╥mg.srcset锛
>
>
>>
>> > @src鏄粰涓嶆敮鎸乻rcset鐨刦allback銆
>>
>> 杩欐槸涓绉嶆兂娉曘備笉杩 Wikipedia 鐨勫仛娉曟槸鎶 1x 鐨 .png 鏀惧埌 @src 閲岋紝@srcset
>> 娌℃湁 1x 鐨 .png锛
>>
>
> 鐨勭‘鐜板湪鏄彲浠ヨ繖鏍风殑銆傝佸疄璇存垜璁や负杩欐槸涓笉濂界殑鍋氭硶銆傛垜鍏跺疄璁や负瑙勮寖搴旇鏀逛负鏈@srcset鏃跺彧鐢@srcset鑰屽拷鐣@src銆傝繖鏍峰叾瀹炵悊瑙ｈ捣鏉ユ洿绠鍗曘
>
>>
>> <img src="picture.png" srcset="picture-HD.png 2x" />
>>
>> 涓嶆槸 鈥滀笉鏀寔 @srcset 鐨 fallback鈥濄俧allback 鐨勬濈淮鐨勫啓娉曞簲璇ユ槸锛
>>
>> <img src="picture.png" srcset="picture.png锛宲icture-HD.png 2x" />
>
>
>> > 琛ㄩ潰涓婄湅锛岃繖涔熸湁鍚屾牱闂锛岃剼鏈鏋滆鏀瑰彉fallback鐨勫硷紝闇瑕
>> > setAttribute('src', value)銆備絾鏄疄闄呬笂鏄笉闇瑕佽fallback鐨勶紝鑰屾槸鍐欐垚杩
>> > 鏍 if ('srcset' in img) img.srcset = newSrcSet; else img.src =
>> > newSrcFallback 灏卞彲浠ヤ簡銆傛敞鎰忚繖浠ｇ爜鍗充娇瀵圭幇鍦ㄧ殑srcset瀹炵幇涔熸槸瀵圭殑銆
>>
>> 濡傛灉 newSrcSet 鏄 "picture-HD.png 2x" 鑰屼笉鏄 "picture.png锛宲icture-
>> HD.png 2x"锛岄偅灏辨槸閿欑殑锛屽洜涓烘病鏈夎缃埌 1px 鐨勫浘鍍忋
>>
>
> 纭疄銆備絾鏄湪瀹為檯褰撲腑锛岃繖涓嶆垚涓洪棶棰樸傚弽杩囨潵璇达紝鎴戞兂鍍忎笉鍒版湁鍙敼鍙2x 3x .5x鐨勫浘鐗囪屼笉鏀瑰彉1x鍥剧墖鐨勯渶姹傚晩銆
>
>
>> > 杩欓噷鐨勮鐐规槸锛宧tml鍥犱负鏄潤鎬佺殑锛岄渶瑕佸悓鏃跺啓srcset鍜宻rc锛屼絾鏄剼鏈笉闇瑕
>> > 鍚屾椂鍐欏叆銆
>>
>> 鏄備絾鏄瘮璧 1) 鎻愭瑕佹眰鐨
>>
>> if ('srcset' in img)
>> img.srcset = newSrcSet;
>> else
>> img.src = newSrcFallback;
>>
>> 鍐欐硶锛2) 鎻愭瑕佹眰鐨
>>
>> img.src = newSrcFallback;
>> img.srcset = newSrcSet;
>>
>> 灏戜簡涓よ锛岃櫧鐒堕『搴忚姹傜殑纭湁鐐瑰潙銆
>>
>
>
> 浠ｇ爜澶氬皯涓嶆槸闂銆傝兘鍚︾悊瑙ｆ墠鏄棶棰樸@src鍜@srcset鏄苟瀛樺叧绯伙紝img.src鍜宨mg.srcset鍗存槸浜掔浉瑕嗙洊鐨勫叧绯伙紝鎬庝箞鐪嬮兘鏄竴浠跺鎬殑浜嬫儏銆
>
>
>>
>> > 娉ㄦ剰1鍜2鐨勫樊鍒槸锛氭柟妗1鐨刬mg.src姘歌繙override
>> > @srcset鍜@src锛屾墍浠ヤ笉瀛樺湪浼樺厛绾ч棶棰橈紱鏂规2鐨剆rc鍜宻rcset灞炴ф槸鍜@src鍜
>> > @srcset瀵瑰簲鐨勶紝灏变骇鐢熶簡浼樺厛绾с侀『搴忎箣绫荤殑闂銆
>>
>> 鍒繕浜嗘柟妗 1) 涔熻鐩 .srcset 浜嗐
>>
>
> 浣嗘槸椤哄簭鏄崟涓鐨勶細
>
> src > srcset > @srcset > @src
>
> 鑰屾柟妗2鐨勯『搴忓浣曠悊瑙ｅ憿锛熷洶闅惧緱澶氬晩銆
>
>
>
Received on Sunday, 27 October 2013 13:32:07 UTC