研究一下響應(yīng)式圖片加載屬性srcset和sizes_html/css

這倆個(gè)屬性的作用是為不同顯示尺寸加載不同的圖片源，這樣就能在圖片本身做到“響應(yīng)式”，而不僅僅是跟隨屏幕尺寸了。

比如上面圖中的srcset為

srcset=".../gt-scavenger_1-300x507.jpg 300w, .../gt-scavenger_1-768x1298.jpg 768w, .../gt-scavenger_1-606x1024.jpg 606w, .../gt-scavenger_1-624x1055.jpg 624w, .../gt-scavenger_1.jpg 1407w"

其中每一段的格式為srcset=”[圖片URL] [圖片寬度], [圖片URL] [圖片寬度]…”，按最新的標(biāo)準(zhǔn)，單位“w”表示當(dāng)前顯示寬度的像素值。解釋起來就是這張圖片在低于300px寬度的時(shí)候，顯示小圖“gt-scavenger_1-300×507.jpg”；高于300像素且低于606像素時(shí)，顯示中等尺寸圖片“gt-scavenger_1-606×1024.jpg”；當(dāng)圖片顯示尺寸大于1407像素時(shí)就顯示全尺寸圖“gt-scavenger_1.jpg”。另外一個(gè)屬性sizes的寫法

sizes="(max-width: 1407px) 100vw, 1407px"

其格式為sizes=”[media query] [視窗寬度], [media query] [視窗寬度] …”。這里的寬度為視窗寬度，即我們常說的viewport寬度。和我們在媒體CSS中寫的媒體查詢是一致的，這里最后一個(gè)“1407px”指默認(rèn)狀態(tài)下，即前面的媒體查詢沒有描述到的情況下這張圖片顯示的寬度。以上代碼的通俗解釋是，這張圖片在1407px寬的視窗內(nèi)撐滿視窗（100vw），而視窗寬度超過1407px，圖片就按1407px的最大尺寸顯示。

srcset和sizes為HTML5的最新屬性，合理使用它們，尤其是srcset，可以有效避免資源的過度加載，在移動(dòng)端通過按需加載，減少圖片的加載量，加快網(wǎng)頁打開速度。不過在實(shí)際開發(fā)中這樣分級顯示圖片是很麻煩的，要制作多個(gè)尺寸的圖片，HTML里還要加那么多代碼…想想就頭疼。

令人驚喜的是在最新版WordPress中你完全不需要進(jìn)行任何額外操作，只需像平時(shí)那樣在文章中插圖片即可。WordPress會自動(dòng)根據(jù)你上傳的圖片給，按照各級縮略圖規(guī)劃出適合的顯示分級，真的很強(qiáng)大！

不過在一些舊的WordPress項(xiàng)目中我們也碰到了問題。比如在有些頁面中我已經(jīng)做了“懶加載”，即預(yù)先在img的src里放一張空圖片，把實(shí)際URL寫到data-original屬性里，再根據(jù)頁面滾動(dòng)的高度，把data-original的值放到src屬性里。當(dāng)圖片被賦予了srcset屬性時(shí)，所做的這一切就形同虛設(shè)了。頁面載入的時(shí)候，瀏覽器已經(jīng)從srcset屬性中讀取了一張適配的圖片到src屬性中：

要避免這種情況，我只能在懶加載和srcset之間二取其一。如果要在WordPress中禁用srcset和sizes，你可以把以下代碼加到主題的function文件中：

//disable srcset on imagesfunction disable_srcset( $sources ) {	return false;}add_filter( 'wp_calculate_image_srcset', 'disable_srcset' );

最后，如果你想要深挖srcset和sizes，可以看一下 這篇文章 。

本站所有文章均為原創(chuàng)，歡迎轉(zhuǎn)載，但請注明文章出處：http://blog.brain1981.com/1323.html

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com