每日 30 秒 ⏱ img の 小九九

簡介

SEO、跨域、無障礙閱讀、事件、圖片標籤

小九九 最直接的聯想即是 九九乘法表，可是 小九九 也用在形容一我的在內心打着算盤 小主意 和 小祕密。小祕密已經被 H1 の 小祕密 這篇文章使用了，爲了體現小二的「博學多才」就換個詞語吧（其實想個詞腦殼已經💥爆炸了）。

開發中常用的 <img> 瞞着你許多事情，爲了防止青青草原尷尬事件一塊兒化身名偵探對其大探祕，看它到底有多少小九九！

主要討論 img 標籤 相關內容，關於圖片的懶加載等優化操做並不在這展開。

alt 屬性

小二在剛開始學習 HTML 的時候只會用到 <img> 的 src 屬性，以爲 alt 屬性 並無什麼用寫起來佔位置還看着不舒服。可是 alt 屬性 並無想象中的那麼簡單哦。

佔位

爲何會以爲 alt 屬性 無關緊要呢？由於 alt 屬性 在下面這些狀況纔會顯示出來：

• 網速太慢
• 瀏覽器禁用圖像
• src 屬性中的錯誤
• 網絡緣由加載不到圖片
• 用戶使用的是屏幕閱讀器

但是平時不多會遇到這些狀況並不高，因此也就沒有感覺到這個做用。正所謂的失去的時候，才知道要珍惜。
有的同窗說：鼠標放到圖片上的時候也會顯示 alt 屬性 中的內容。小二印象中也是這樣的，但是寫了個 demo 在 chrome 和 safari 都試過了放了半天都沒有顯示出來，不知道是否是如今瀏覽器都不支持這個了。

IE 是前端程序 🐒 繞不過去的一個坎。

後來查詢了一下才知道 Internet Explorer 纔會顯示，果真 IE 在瀏覽器中是獨一檔。而另一檔的瀏覽器都是按照 alt 屬性 的標準來實現，只有圖片加載不出時才顯示。除了這個 IE 在 <img> 還有一些獨一檔的表現，小二仍是把它繞過去吧。

SEO

在 SEO（搜索引擎優化）方面 alt 屬性 也有必定的做用哦，雖然如今有了 AI 能夠識別出圖片裏面的內容是什麼。但是搜索引擎並無那麼聰明哦，它在理解一張圖片是什麼的時候會去讀取 alt 屬性，而且配合頁面的 title、description 來組織和保存這張圖片的信息。這也是爲何在百度、谷歌 搜索關鍵詞時能獲得那麼多相關圖片的緣由。

更多 SEO 相關知識能夠閱讀 SEO初體驗 和 H1 の 小祕密。

特殊羣體

對於盲人或者其餘視力有障礙羣體時可能看不到圖片，他們能夠經過屏幕閱讀器等輔助工具閱讀alt 屬性 來理解圖片內容。不過也不是全部圖片都要加上 alt 屬性，當裝飾性和無心義的圖片應該把 alt 屬性 置爲空 防止特殊羣體對頁面內容產生困惑。

但願你們都能加上 alt 屬性 畢竟感覺不到色彩和世界美妙時，還能感覺圖片的內容和溫度。想一想本身的代碼能讓世界更美好了，不是一件值得開心的事情嗎？

更多 無障礙閱讀 相關知識能夠閱讀 H1 の 小祕密。

塌陷

在瀏覽網頁常常會遇到 圖片 忽然加載出來，致使頁面閃爍和圖片閃現很影響體驗。這是由於圖片還未加載出來而且沒有被設置寬高 時，瀏覽器不知道這個圖片到底該怎麼排布和渲染它。能夠利用佔位圖片或者設置寬高來解決這個問題，也可使用專門解決佔位的庫這裏推薦 Semantic UI 的 placeholder 組件好用、好看。

更多內容能夠查閱 瀏覽器渲染流程。

事件

圖片也有着本身的事件：

事件	描述
onabort	當用戶放棄圖像的加載時調用。
onerror	在加載圖像的過程當中發生錯誤時調用。
onload	當圖像加載完畢時調用件。

不過這三個事件並不能獲取到服務端返回相關的信息，利用這三個事件能夠作到：

• 當用戶放棄圖片裝載 和 圖片加載失敗的時候，能夠調用佔位圖片來解決頁面排版的問題。
• 當圖片正在加載時能夠顯示佔位圖片或者動畫效果，當加載成功時關閉佔位相關內容。
• 當圖片加載失敗的時候從新請求圖片或者給出提示。

相關操做

利用 Image 對象來獲取並生成 DOM，而且利用了 crossOrigin 屬性來容許跨域：

const urlToImgDOM = ({ url, alt = '' }) => new Promise((reslove, reject) => {
    let imgDOM = new Image();
    
    imgDOM.alt = alt;
    imgDOM.setAttribute("crossOrigin", 'Anonymous');
    
    imgDOM.onload = () => reslove(imgDOM);
    imgDOM.onerror = () => reject(err);
    
    // 若是圖片在瀏覽器緩存中
    // 會不除非 onload 函數須要後置
    imgDOM.src = url;
})

利用 DOM 來生成 canvas：

const imgDOMToCanvas = (imgDom) => {
    // 建立 Canvas 畫布
    let canvas = document.createElement("canvas");
    canvas.width = imgDom.width;
    canvas.height = imgDom.height;
    
    // 繪製圖片
    let ctx = canvas.getContext('2d');
    ctx.drawImage(imgDom, 0, 0, canvas.width, canvas.height);

    return canvas;
}

利用 canvas 轉 base64，注意圖片要是跨域了會報錯：

canvas.toDataURL()

SEO 相關內容

• H1 の 小祕密
• SEO 初體驗
• img の 小九九
• 千裏姻緣一線牽

一塊兒成長

在困惑的城市裏總少不了並肩同行的 夥伴 讓咱們一塊兒成長。

• 若是您想讓更多人看到文章能夠點個 點贊。
• 若是您想激勵小二能夠到 Github 給個 小星星。
• 若是您想與小二更多交流添加微信 m353839115。

本文原稿來自 PushMeTop