Intersection Observer API 使用筆記

剛進入業界時,為了提高網頁的效能以及更豐富的網頁互動效果,會利用 bLazy.js 實作圖片延遲載入或是用 waypoints.js 執行間單的進場效果。不過後來發現 Intersection Observer 這個瀏覽器原生的 Web API 讓這一切變得更簡單使用而且效能也更好。
嗨!我是 Alex Liu,這裡記錄了我自己技術開發上的一些心得、過程。目前主要開發以 Vue.js 搭配 TypeScript 為主,是一個追求有趣技術的偏執狂!
剛進入業界時,為了提高網頁的效能以及更豐富的網頁互動效果,會利用 bLazy.js 實作圖片延遲載入或是用 waypoints.js 執行間單的進場效果。不過後來發現 Intersection Observer 這個瀏覽器原生的 Web API 讓這一切變得更簡單使用而且效能也更好。
在使用 Vue 在製作比較複雜的專案時,可能會因應不同的頁面需求需要有多種不同的 Layout 設定,在 Nuxt.js 可以輕鬆的利用屬性來設定,但在 Vue CLI 下或是 Gridsome 中要如何實作呢?這裡將分享幾種實作方式。
現在越來越多網站,開始加入「深色模式」的切換選擇,關於這個近期逐漸流行的色彩模式切換到底該怎麼做呢?在技術上會有什麼限制呢!
在開發 Vue 專案的時候,單檔組件(SFC)提供了開發者非常好的便利性。但有時候在某些特殊情況時 Render Functions 提供了更好的靈活性,可以讓組件寫得更優雅。那我們該怎麼應用呢?
上一篇分享了用 Vue.js 做 15-puzzle 小遊戲的資料部分。接下來這一篇來分:我是怎麼規劃 components 與遊戲成功的判定方式。
前陣子在 Facebook 社團看到有網友用 Vanilla JS 做了一個 15 puzzle 的小遊戲,剛好假日非常有(ㄅㄧㄢ)空(ㄩㄢˊ),那就利用 Vue.js 來做做看囉!