課程目標
認識並且能使用 vanilla-lazyload 套件
課程內容
這次的套件是 https://github.com/verlok/vanilla-lazyload
文件與 demo 在 https://www.andreaverlicchi.eu/vanilla-lazyload/
當畫面上圖片很多的時候，頁面載入會很慢
lazy load 是所謂的延遲載入技術
也就是不會在一開始就通通載入，而是使用者在網頁上下滑動的時候，圖片元素出現在畫面中的時候，才動態去載入圖片
<img alt="A lazy image" class="lazy" data-src="lazy.jpg" />
使用了 img 元素，class 設為 lazy，但不設定 src 屬性（因為設了瀏覽器就會直接去抓圖片），而是使用 data attribute 來另外給一個 data-src 屬性
這是一種常用的 API 設計，套件會自己去找出 .lazy 的元素，然後去找元素的 data-src 屬性，接著載入圖片
要啟用套件，需要以下 javascript
var lazyLoadInstance = new LazyLoad({
// Your custom settings go here
});
這樣就完成了，很簡單吧？
這邊用到了 javascript 的 OOP 物件導向語法，new 出一個新物件。可以先不管 OOP 細節，照做就好，反正就是創造一個物件然後執行一些函式
創造的同時，會傳一個用大括號 {} 包起來的物件進去，當作套件的設定值。這邊因為都用預設的設定，所以傳空物件進去就好
// 開頭的是註解，是給開發者自己看的提醒文字，沒有實際功能
比較進階的用法會類似這樣
var lazyLazy = new LazyLoad({
elements_selector: ".horizContainer",
callback_enter: initOneLazyLoad,
unobserve_entered: true // Stop observing .horizContainer(s) after they entered
});
這個例子傳了有三個屬性的物件進去
各個設定與功能效果，可以再查文件，反正會用 {} 包起來的物件去進行參數設定就對了
這種「傳一個物件當參數，來進行套件的功能設定」的設計，也是 javascript 套件的常用 API 設計
關於物件這種資料型態，之後的課程會再進一步學習
課後作業
請使用 https://jsfiddle.net
接著上網尋找 10 張漂亮圖片。參考圖庫：https://unsplash.com/
假設正在開發一個包含大量高畫質、大圖片的企業形象網站，包含這 10 張圖片，上往下依序排列
一次載入，實在太慢了，尤其是手機用戶、舊電腦的用戶、或者網速很慢的用戶
請替這些圖片加上 lazy loading 功能
做出以上功能，你就完成這次的課程目標了！
歡迎將作業成果，在下方留言，跟大家分享，讓大家給你一些回饋！
可以將每課學到的觀念、關鍵字，丟到網路上去搜尋、研究一下！
發問請在「討論專區」為主，或者分享學習筆記、寫學習心得！
貼文都會出現在個人檔案頁面，成為學習歷程、部落格紀錄！
未來面試時，分享給面試官看，會讓人知道你的積極程度！
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
交作業 https://jsfiddle.net/birdie2019/401xa29h/104/
交作業 https://jsfiddle.net/evon0306/mtpxqnkb/
https://jsfiddle.net/superyngo/98wh3tqg/4/ 交作業
https://jsfiddle.net/johnny890118/serq5ujo/27/ 交作業
https://jsfiddle.net/ZooeyLai/1jeozkrh/3/ 交作業~
https://jsfiddle.net/wimp9487/tqdaevh9/8/ 交作業!
作業繳交
https://jsfiddle.net/mb2902911/shmb1yef/9/
作業繳交 https://jsfiddle.net/u1gzmLf5/7/