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 ローディング画像

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

jQueryでウィンドウサイズによって処理を変えるjQueryのマウス操作のイベントをまとめてみる前のページ

画像やHTML要素に簡単にドロップシャドウをつけられるjQueryプラグイン「pShadow」次のページ

関連記事

  1. JavaScript

    画像の一部をカッコよく拡大したりできるjQueryプラグイン「Loupe」

    こうゆうプラグインは初めて使ってみたんですが、とても面白いですね。Lo…

  2. Albe Timeline

    JavaScript

    JSONデータを用いたタイムライン実装「Albe Timeline」

    Albe TimelineはJSONデータを用いたカスタマイズ性の高い…

  3. EZ Tabs jQuery Plugin
  4. 4PXMMenu

    JavaScript

    滑らかなアニメーションでモバイルサイトに最適なメニュー実装「4PXMMenu」

    4PXMMenuはモバイルサイトに最適なメニューを実装することができる…

  5. Sal.js

    JavaScript

    Vanilla JSによる軽量のスクロールアニメーションライブラリ「Sal.js」

    Sal.jsは軽量のスクロールアニメーションを実装できるライブラリです…

  6. jQuery GoUp!

    JavaScript

    ページ上部にスクロール移動してくれる「jQuery GoUp!」

    jQuery GoUp!は、ページ上部にスクロール移動してくれるシンプ…

コメント

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

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

最近の記事

  1. RF85mm F2 MACRO IS STM
  2. Anker PowerWave Pad Alloy
  3. Anker Bolder LC30
  4. BG-R10

アーカイブ

PAGE TOP