Macy.jsは、効率的な瀑布流レイアウトと画像の読み込み最適化に焦点を当てた軽量なJavaScriptライブラリです。インテリジェントな画像読み込み戦略と柔軟なレイアウトアルゴリズムにより、Macy.jsはウェブページの画像表示パフォーマンスを大幅に向上させ、ユーザーに滑らかな閲覧体験を提供します。

なぜMacy.jsで画像最適化を行うべきか？

現代のウェブデザインにおいて、画像は読み込み速度に最も影響を与える要素の一つです。Macy.jsは以下の主要な特性を通じてこの問題を解決します：

• インテリジェントな画像読み込み：視覚領域内の画像のみを読み込むことで初期読み込み時間を短縮
• レスポンシブレイアウト：画面サイズに応じて列数と間隔を自動調整
• 軽量設計：コアライブラリのサイズが小さく、冗長な依存関係がない
• 柔軟な設定：列数、間隔、ブレークポイントのカスタマイズが可能

Macy.jsの主要な最適化機能

Macy.jsは複数の画像読み込み最適化方法を提供しており、特に以下の機能が有用です：

1. 画像読み込み完了後の再計算

macyInstance.recalculateOnImageLoad();
  

このメソッドは、すべての画像が読み込まれた後にレイアウト計算を行うため、画像のサイズ変更によるページの跳ねを防ぎます。src/macy.jsの実装を見ると、画像読み込みイベントの監視によって正確な制御が行われていることがわかります。

2. バッチ読み込み戦略

Macy.jsの`runOnImageLoad`メソッドを使用すると、各画像が読み込まれたときに特定の操作を実行し、漸進的な画像表示を実現できます。

macyInstance.runOnImageLoad(function() {
  // 画像読み込み後のコールバック処理
}, true);
  

これにより、ユーザーエクスペリエンスを向上させつつ、大量の画像を同時に読み込むことによるパフォーマンス問題を回避できます。

すぐに始められる：Macy.jsの基本設定

インストールと導入

npmを使用してMacy.jsをインストールします：

npm install macy.js
  

または、リポジトリを直接クローンすることも可能です：

git clone https://gitcode.com/gh_mirrors/mac/macy.js
  

基本的な初期化コード

import Macy from 'macy.js';

const macy = new Macy({
  container: '#macy-container',
  columns: 4,
  margin: 20,
  breakAt: {
    1200: 3,
    940: 2,
    520: 1
  },
  waitForImages: true
});
  

高度なパフォーマンス最適化技術

1. レスポンシブ画像読み込み

Macy.jsのブレークポイント設定とHTML5の`srcset`属性を組み合わせることで、異なる画面サイズに対して異なる解像度の画像を読み込むことができます。

<img src="image-small.jpg" 
     srcset="image-small.jpg 400w,
             image-medium.jpg 800w,
             image-large.jpg 1200w"
     sizes="(max-width: 520px) 100vw,
            (max-width: 940px) 50vw,
            33vw">
  

2. 画像プリロード戦略

Macy.jsの`runOnImageLoad`メソッドを使用して、視覚領域内の画像を優先的に読み込むことができます。

// 視覚領域内の画像を優先的に読み込む
macy.runOnImageLoad(function(img) {
  img.classList.add('loaded');
}, true);
  

3. コンテナサイズの最適化

`useContainerForBreakpoints: true`を設定することで、Macy.jsはウィンドウ幅ではなくコンテナ幅に基づいてレイアウトを計算します。これは複雑なページ構造に適しています。

const macy = new Macy({
  // 他の設定...
  useContainerForBreakpoints: true
});
  

よくある問題と解決策

画像読み込み後にレイアウトが更新されない

`waitForImages`オプションが有効になっていることを確認してください。

const macy = new Macy({
  // 他の設定...
  waitForImages: true
});
  

それでも問題が解決しない場合は、手動で再計算をトリガーします。

macy.recalculate();
  

特定のブレークポイントでのレスポンシブレイアウトが異常

`breakAt`設定が正しいことを確認し、ブレークポイント値が小さい順に並んでいることを確認してください。

breakAt: {
  520: 1,   // 小画面
  940: 2,   // 中画面
  1200: 3   // 大画面
}