画像の遅延ロードでイライラを解消 TADAプラグイン

「TADA」は、画像の遅延ローディングを手軽に実装するプラグインです。ページを読み込んだときではなく、画像が見える位置までスクロールしたタイミングで読み込むので、ページを開いたときの待ち時間を短縮できます。

TADAプラグインはGoogle ChromeなどのモダンブラウザーとInternet Explorer 8以降、iOS／Androidのスマートフォンに対応しています。

ライセンスはMITです。ライセンスに従って著作権表示は削除せずに利用しましょう。

step1 jQueryプラグインの読み込み

jQuery本体をjQueryの公式サイトから、 TADAをGithubからダウンロードします。ページ右下の「Download ZIP」ボタンからダウンロードできます。

TADAプラグイン配布ページ

利用するWebページのbodyの閉じタグ直前で、jQuery本体と、ダウンロードした「jquery.tada.min.js」を読み込みます。

//(中略)
<script src="jquery.min.js"></script>
<script src="jquery.tada.min.js"></script>
</body> 
//(中略)

カスタムデータ属性「data-src」の値に、表示したい画像へのパスを記述します。後からjQueryプラグインで要素を取得するために、任意のID名、もしくはclass名を振っておきましょう。下の例ではclass名に「js-lazy-image」を指定しています。

HTML

//(中略)
<img class="js-lazy-image" data-src="path/to/image">
//(中略)

これで準備はOKです。

img要素にはsrc属性が必須ですが、値を空にしていてもサーバーへリクエストを飛ばしてしまう場合があるため、あえて記述していません。プレースホルダーやローディングの GIFなどの軽量の画像を先に表示しておきたい場合には、src 属性にその画像へのパスを記述しておきます。プレースホルダーやローディング GIF は「同一の画像」にし、リクエストは1回で済むようにしましょう。

src属性を省略する場合は親要素に高さと幅を指定しサイズを確保しましょう。

...詳しい情報・続きはこちら >>
http://ascii.jp/elem/000/000/997/997040/
─情報元：ASCII.jpサイト様─