ITエンジニア/デザイナ向けにオープンソースを毎日紹介

Webサイトは縦長なページが多く、その中で画像を多用していることも多いでしょう。そんな時、HTMLを読み込んだタイミングで画像も読み込んでしまうとネットワークの負荷が高くなります。それを防ぐ遅延読み込みもありますが、技術的に面倒と感じている人も多いかと思います。

そこで使ってみたいのがGandulです。簡単に遅延読み込みが実現します。

Gandulの使い方

Gandulはaタグで遅延読み込み対象の画像を指定します。クラスにgandulを指定するのもポイントです。

<a href="http://placekitten.com/320/180" class="gandul">Nice kitten</a>

そして読み込むべきタイミングになると、以下のように画像タグに変わります。

<img src="http://placekitten.com/320/180" class="gandul" alt="Nice kitten" />

GandulはJavaScriptが無効であればaタグのままなので、問題にはならないでしょう。imgタグとdata要素で行うよりもスマートだと思います。何よりスクロールなどのタイミングを見ないといけない遅延読み込みを簡単に実現してくれるのが嬉しいポイントでしょう。

GandulはJavaScript製のオープンソース・ソフトウェア(MIT License)です。

Gandul. Accessible Image Lazy Loading.

alterebro/accessible-image-lazy-load: ? gandul! accessible lazy loading images

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2