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. Freewall

    JavaScript

    レスポンシブ対応のグリッドレイアウトを実装できるjQueryプラグイン「Freewall」

    FreewallというjQueryプラグインを使えばレスポンシブに対応…

  2. Switch

    JavaScript

    iOSスタイルのシンプルなチェックボックスを実装できる「Switch」

    Switchは、シンプルでパワフルなiOSスタイルのチェックボックスを…

  3. jfMagnify
  4. FModal.JS

    JavaScript

    シンプルなフルスクリーンのモーダルウィンドウ「FModal.JS」

    FModal.JSはシンプルなフルスクリーンのモーダルウィンドウを実装…

  5. JavaScript

    ライトボックスみたいなお洒落なアラートを出してカスタマイズもできるjQuery uLightBox …

    ライトボックスみたいなお洒落なアラートを表示させることができるjQue…

  6. Jquery Toast Plugin

    JavaScript

    高いカスタマイズ性を備えたトースト通知を実装できる「Jquery Toast Plugin」

    Jquery Toast Pluginは高いカスタマイズ性を備えたアニ…

コメント

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

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

最近の記事

  1. そそそ 明太クリームそうめん
  2. すしざんまい
  3. 蒼龍唐玉堂 特製牛バラ担々麺
  4. サーモンアボカドサラダラップとドリップ
  5. 猿田彦フレンチ

アーカイブ

PAGE TOP