JavaScript

指定した画像を遅らせてローディングさせるjQueryプラグイン「Lazy Karl」の使い方

ちょっと面白そうだったので試してみました。画像を表示させるまでの間にローディング画像表示させることができます。使い方はとても簡単です。これが表示されると一発で読み込んでいる最中なんだなっていうのがわかりますね。

[ads_center]

使い方

以下のURLからダウンロードできます。デモも見れるので見たい人はどうぞ。

head内でjQueryとlazykarl.min.jsを読み込みます。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="lazykarl.min.js"></script>
<script>
	$().ready(function() {  
		$(".lazyloader").lazyKarl();
	}); 
</script>

HTMLはこんな感じです。

<div class="lazyloader">
	<div class="lazyimg"><img rel='images/img01.jpg'></div>
	<div class="lazyimg"><img rel='images/img02.jpg'></div>
	<div class="lazyimg"><img rel='images/img03.jpg'></div>
</div>

lazyimgクラスを指定してrel属性に画像のパスを指定します。複数ブラウザで正しく動作させるためみたいです。
ローディングはこんな感じで画像を読み込んでいきます。

Lazy Karl ローディング画像

何気にあったら便利ですね。

関連記事

  1. JavaScript

    フレキシブルなjQueryプラグインのアコーディオンパネル「Flexible Slide-to-to…

    いい感じのアコーディオンがあったので試してみたところ、とてもよさげだっ…

  2. JavaScript

    虫メガネのようにマウスを置いた所を拡大することができるjQueryプラグイン「mlens」

    虫メガネのようにマウスを置いた所を拡大することができるjQueryプラ…

  3. Fitty

    JavaScript

    親コンテナにテキストをフィットさせられる「Fitty」

    Fittyはテキストをスケールアップ、またはスケールダウンして親コンテ…

  4. AJAX Live Search
  5. jQuery Inline Footnotes

    JavaScript

    ホバーで脚注を表示できる「jQuery Inline Footnotes」

    jQuery Inline Footnotesはホバーすることで脚注の…

  6. fullPage.js

    JavaScript

    フルページでコンテンツごとにスクロールする「fullPage.js」

    fullPage.jsはフルページでコンテンツごとにスクロールするレス…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. プラスシェル シティ04 フォールディングカメラケース
  2. enerpad AC-27KS
  3. KMS-160

アーカイブ

PAGE TOP