JavaScriptの発火タイミング
Magic Gridで「高さの分からない要素(画像)をグリッドに並べる」ことはできたが、
ページによっては or データ転送速度によっては画像が重くなり、Magic Grid の発火までに画像が読み込めずに、レイアウトが崩れることがあった。
ローディング画面を設置して「見せられないよ!」にしてごまかそうとも思ったが、上手くいかなかった。
だめだった例1. 「すべてロードし終わったら」(window.onLoad)
→ Magic Grid が発火せず、レイアウトが変化しない
→ window.onLoadがどこかで競合しているんだと思う
code:magic-grid-setting.js
window.onLoad = function() {
let magicGrid = new MagicGrid({
container: '#container',
static: false,
items: php.str, // ここに渡す
...
});
magicGrid.listen();
};
だめだった例2.「DOMが読み込み終わったら」
→ 画像が読み込み終わっていないので、画像の高さが読み込まれておらず、レイアウトが崩れる
code:magic-grid-setting.js
document.addEventListener('DOMContentLoaded', function() {
let magicGrid = new MagicGrid({
container: '#container',
static: false,
items: php.str, // ここに渡す
...
});
magicGrid.listen();
});
参考:
OKの例1.「すべてロードし終わったら」(window.addEventListener)
→ 「すべてロードが終わったあと」なので、時間がかかる
code:magic-grid-setting.js
window.addEventListener('load', function() {
let magicGrid = new MagicGrid({
container: '#container',
static: false,
items: php.str, // ここに渡す
...
});
magicGrid.listen();
});
これはwindow.onLoadと発火タイミングは同じだそうです。
参考:
OKの例2. 「画像のロードが終わったら」
jQuery でも Vanilla JavaScript でも使える
適当にCDNで貰ってくる
code:imagesloaded.js
書き方(JavaScript)
code:sample.js
imagesLoaded( document.querySelector('#container'), function( instance ) {
console.log('all images are loaded');
});
code:magic-grid-setting.js
imagesLoaded( document.querySelector('#container'), function( instance ) {
let magicGrid = new MagicGrid({
container: '#container',
static: false,
items: php.str, // ここに渡す
...
});
magicGrid.listen();
});
imagesLoaded の良い点は id, class ごとに設定できるところ。今回はギャラリーのコンテナ(#container)の中身だけを読み込み判定の対象にしている。
速度
画像のギャラリーとして使うサイトなので、画像の読み込み ≒ サイトの読み込み になっているので、今回は速度は大差ないんじゃないかな〜と思いつつ検証
Chrome 開発者ツールの Performance で計測
Network: Fast 3G
CPU: 4x slowdown
結果
window.addEventListener('load', function() { ... }); : 50355 ms
imagesLoaded: 6329 ms
ん? こんなに変わるか? なんか間違ってない?
っていうか読み込む画像が重い
ので修正しましょう はい