IntersectionObserver:下篇-實際應用 lazyload、進場效果、無限捲動

本篇大綱:使用資源。lazy load 延遲載入(圖片、影片)、一個神奇的狀況(坑?)。進場效果。無限捲動。原始碼、Demo。接續上一篇的IntersectionObserver基本使用(以下簡稱IO),本篇來寫三個實際應用。本篇的無限滾動,是像FB那樣子,頁面每捲到底,就會多載入一張卡片進來。

IntersectionObserver:上篇-基本介紹及使用

本篇大綱:IntersectionObserver?拿超商的歡迎光臨來說明。IO使用3步驟:1 建立觀察器(observer)、2 指定觀察器要觀察的獵物(entry)、3 當獵物 進入(true) / 離開(false) 觀察器視窗的範圍,觀察器就執行callback。原始碼。參考資源。

JavaScript載入方式 defer, async

本篇大綱:defer、async、都不寫。這是很久以前的筆記,這次來整理並更新,主要是筆記載入JavaScript時,defer、async這兩個標籤的不同。瀏覽器是一行一行讀下去的,defer、async都不寫的話,DOM繪製到引用JS的那一行時,就停下來先解讀、執行完,然後DOM才接著往下繪製。

d3、vue 畫一個台灣地圖

本篇大綱:畫一個台灣地圖需要很多資源的幫忙、畫台灣地圖步驟、下載縣市界線經緯度、SHP轉檔GeoJSON、製作頁面、HTML、引用d3.js、d3.js append svg path、參考資源、原始碼、Demo。本篇紀錄在畫一個台灣的步驟,包含拿資料、轉檔、用d3.js繪製地圖,以及把台灣本島放在區塊中央。

ml5.js 神經網路 開發圖像辨識

本篇大綱:機器學習的JS Library、vue.js抓input file、ml5.js 圖像辨識API、第一個坑 沒等model載完、第二個坑 沒給圖片寬高、補充 關於圖片辨識模組、原始碼。本篇筆記主要寫用vue.js,搭配file API、ml5.js,做一個簡單的圖像識別頁面來玩。

切詞工具結巴Jeiba 優化標籤關鍵字

本篇大綱:切詞功能 幫你找到適合的標籤、結巴 Jieba 基本使用、切詞功能實際應用、參考資料。每篇文章都需要下標籤(tags),有時會不知道要下哪些,或是這個詞是不是大家比較常搜尋的關鍵字。Wordpress會把每個標籤獨立成一頁,所以想把標籤盡量設成跟關鍵字有關,以利SEO。

用原生JS做一個簡單的手風琴Accordion/Collapse功能

本篇大綱:從jQuery到原生JS、HTML、CSS、JavaScript、原始碼下載。今年開始在工作時逼自己寫原生的JS(Vanilla JavaScript),今天趁著意外的假日,試著把手風琴用原生JS寫了一個出來。寫完後發現,其實沒幾行就可以完成,也有了一點小小的成就感。

Promise, Async, Await 基本使用筆記

本篇大綱:Promise, Async, Await 真是個好物、Promise使用、Promise polyfill、Async, Await使用、Async, Await polyfill、筆記後心得。Promise, async, await,覺得又是一個前端必學的語法,可以很有效的解決以前遇到的問題。

用原生JS做一個簡單的抽獎功能頁面

本篇大綱:本篇會完成的Demo、本篇用到資源、html部份、css部份、js部份、抽獎名單資料庫、範例頁面、原始碼。很多活動頁上都在玩抽獎,就自己動手寫了一個出來。把名稱改成「午餐吃什麼」,把抽獎的名單換成店家名稱,順便再加上Google Map進去,就解決不知道午餐要吃什麼的煩惱啦~

File API 客製上傳檔案按鈕(input file)

本篇大綱:客製上傳檔案input html 部份、客製上傳檔案input js 部份、示範頁面。最近朋友遇到一個需求,就是要客製上傳檔案的按鈕。覺得寫成一篇,然後把code存起來,以後要用比較好找。可以看到input的id,跟label的for,兩個值要是相同的,這樣就可以把label跟input綁起來。