之前介紹過 fakeimg 利用圖片來進行假圖佔位:
https://diary.tw/archives/1266
這裡介紹另一種方式來進行圖片佔位, holder.js 工具:
使用方式十分容易簡便, 引用 holder.js 後, 直接下達參數即可順利使用, 也可以指定寬高與文字內容, 中文字也可以哦. 生成的方式是動態的 SVG 進行, demo 程式如下:
<img src="holder.js/300x200"> <img src="holder.js/300x200?theme=sky"> <img src="holder.js/300x200?bg=2a2025&text=Hello"> <img src="holder.js/300x200?bg=f3f2fe&fg=001100&text=中文字也可以哦!">
於 codepen.io 上的 demo 請參考:
在製作一些 demo 效果於 codepen (或其他網站), 要取得非同源(cross-domain)資料, 可以透過 cors-anywhere 服務來達成, 說明如下:
https://cors-anywhere.herokuapp.com/
這對於在實作測試時, 有很大的幫助, 例如在 codepen 上取得空氣盒子的一個盒子資訊:
於 codepen 上, 直接透過 Ajax 方式配合 cors-anywhere 即可順利取得資料, 進行應用輸出, 如 demo :
https://codepen.io/timhuang/pen/vMmeVE
工作原理為透過 cors-anywhere 服務, 可以多增加上
Access-Control-Allow-Origin: *
這個 response header 供跨網域存取而不受同源政策限制.
繼續閱讀:
https://developer.mozilla.org/zh-TW/docs/Web/HTTP/CORS
