imagesLoaded 展示與使用文件官網
imagesLoaded 主要用於檢測圖片載入的情形，針對載入的狀態做後續的流程判斷。
安裝與下載
下載
- imagesloaded.pkgd.min.js minified (https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js)
- imagesloaded.pkgd.js un-minified (https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.js)
CDN
1 2 3 | <script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script> <!-- or --> <script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.js"></script> |
套件管理
Install via npm (https://www.npmjs.com/package/imagesloaded) :
1 | npm install imagesloaded |
Install via Bower (http://bower.io/) :
1 | bower install imagesloaded --save |
vanilla JS 與原生 JavaScript 的應用
imagesLoaded 可以基於 jQuery 函式庫的方式撰寫，在整理這個套件的寫法 jQuery 已經不是必要應用於程式規劃中，下面接動會以運用 VanillaJS 與原生的 JavaScript 與 ES6 寫法撰寫，簡單來說就是可以不用在裝上 jQuery 又多個函式庫的資源佔用。
什麼是 VanillaJS ？ 可以看一下精通VanillaJS這篇文章
初始化 imagesLoaded
基本上有三種寫法可以讓 imagesLoaded 初始化。
1 2 3 | imagesLoaded( elem, callback ) // 基本用法 imagesLoaded( elem, options, callback ) // 加入設定參數 new imagesLoaded( elem, callback ) // 使用 new 的方式實體化 imagesLoaded |
- elem：第一個參數，可指定取得 DOM 元素、節點，或是以陣列與選擇字串方式選取對象。
- options：第二個參數，以一個物件 {} 進行設定。
- callback：第三個參數以一個回呼函式去執行，以圖片戴入後做事件設定。
使用回呼函式綁定到 always 事件
1 2 3 4 5 6 7 8 9 | // 使用指定元素操作 imagesLoaded( document.querySelector('#container'), function( instance ) { console.log('all images are loaded'); }); // 透過選擇器字串方法 imagesLoaded( '#container', function() {...}); // 操作類陣列多筆元素 var posts = document.querySelectorAll('.post'); imagesLoaded( posts, function() {...}); |
vanilla JS 的事件綁定方法 – .on() 綁定, .off() 解綁定, .once() 觸發一次
1 2 3 4 5 6 7 8 | var imgLoad = imagesLoaded( elem ); function onAlways( instance ) { console.log('all images are loaded'); } // bind with .on() imgLoad.on( 'always', onAlways ); // unbind with .off() imgLoad.off( 'always', onAlways ); |
針對樣式的背景圖片 (Background) 設定
{ background: true } 參數設定
可透過回呼函式中的 { background: true } 設定，讓指定對象的 CSS 背景樣式圖片，被安排到讀取事件中。
1 2 3 4 | // vanilla JS imagesLoaded( '#container', { background: true }, function() { console.log('#container background image loaded'); }); |
官方 { background: true } 設定範例：
See the Pen imagesLoaded – background, vanilla JS by Jimmy_Wu (@Jimmy_Wu) on CodePen.
選擇器字串為設定對象
透過指定的字串 .item 所用到的 css 樣式名稱，透過背景圖載入情形觸發事件。
1 2 3 4 | // vanilla JS imagesLoaded( '#container', { background: '.item' }, function() { console.log('all .item background images loaded'); }); |
圖片載入事件
imagesLoaded() 的戴入事件朗要有 .always()、 .done()、 .fail()、 .progress() 四個，分別對應圖片戴入的情形以事件觸發。
先以假圖 https://unsplash.it/ 引入圖片來源，
取圖片大圖為主，尺寸為 4200/2000 來查看載下過程會較久。
以亂數帶不同參數方式接入不同圖片連結， ?random=<nun>。
以上設定條件如下例：
1 2 3 4 5 6 7 | <img class="js-imgLoder" src="https://unsplash.it/4200/2000.jpg?random=1" alt="" /> <img class="js-imgLoder" src="https://unsplash.it/4200/2000.jpg?random=2" alt="" /> <img class="js-imgLoder" src="https://unsplash.it/4200/2000.jpg?random=3" alt="" /> <img class="js-imgLoder" src="https://unsplash.it/4200/2000.jpg?random=4" alt="" /> <img class="js-imgLoder" src="https://unsplash.it/4200/2000.jpg?random=5" alt="" /> <img class="js-imgLoder" src="https://unsplash.it/4200/2000.jpg?random=6" alt="" /> <img class="js-imgLoder" src="https://unsplash.it/4200/2000.jpg?random=7" alt="" /> |
接下來使用 imagesLoaded() 執行一個實體，實體中針對處理的多張圖片對象 .js-imgLoader 進行處理，當圖片都完成戴入後就會透過回呼函式回應出 "all images are loaded"。
always 與 done
- 預設為 always 事件，回呼函式回應 "all images are loaded"。
- done 事件，回呼函式 回傳 "DONE - all images have been successfully loaded" 訊息。
always 與 done 事件同樣很像，也是會透過回呼函式回傳。
比較訊息 "DONE - all images have been successfully loaded" 一定會在前面觸發，而 "all images are loaded" 訊息一定是在最後面。
See the Pen imagesLoaded 圖片載入 .on() 事件 by Jimmy_Wu (@Jimmy_Wu) on CodePen.
progress
可進行圖片在戴入過程，這裡特別把圖片路徑 https://unsplash.ittt/4200/2000.jpg?random=1 (多加 tt 做為無法取得的圖片路徑 )。
透過第二個參數 image.isLoaded 進行圖片判斷， 'loaded' 成功戴下的圖片， 'broken' 有問題的圖片。
See the Pen imagesLoaded 圖片載入 progress 事件 by Jimmy_Wu (@Jimmy_Wu) on CodePen.
fail
針對全部的圖片，如果在執行事件的過程中，有發生圖片因為其他因素影響而一小部份無法完整取得全部圖片，就會觸法這個事件，這裡就不在記錄。
window.onload 事件與 imagesLoaded 處理圖片的差別
window.onload 主要是針對頁面上的 DOM 元素生成的事件確任，像是圖片戴入都完成後才會觸發。
如果在 window.onload 使用 imagesLoaded 的話，只要不是使用背景圖片都會在所有資源確任結構完整後才會執行 imagesLoaded，如果有使用到像是 code>.always()、 .done()、 .fail()、 .progress() 事件，也都會一次同時回應與執行處理。
整合使用
使用自製的頁面讀取中元件結合 imageLoaded
透過簡易的頁面讀取中元件來操作圖片戴入的結果，頁面中的圖片一定都要完整的戴入後才可解除頁面讀取的元件。
頁面讀取中元件使用函式 switchLoading() 透過資料 let loadStatus = false; 呼叫操作切換。
See the Pen imagesLoaded 圖片載入配合頁面讀取中元件 by Jimmy_Wu (@Jimmy_Wu) on CodePen.
官方展示：imagesLoaded, progress with vanilla JS
官方展示的部份，主要設計圖片路徑由亂數判斷，取得的數值一定要 < 100 才可正常顯示，不然就會是以中斷的狀態做為顯示。
See the Pen imagesLoaded, progress with vanilla JS by Dave DeSandro (@desandro) on CodePen.