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. makefixed.js

    JavaScript

    スクロール中に要素を固定配置できるjQueryプラグイン「makefixed.js」

    makefixed.jsはスクロール中に指定した要素を固定配置させるこ…

  2. JavaScript

    サムネイルをクリックして拡大画像が見れるレスポンシブ対応のjQuery画像ギャラリー「Superbo…

    綺麗に並んだサムネイル画像をクリックして拡大画像を見ることができるjQ…

  3. no-image
  4. tabellajs

    JavaScript

    タッチ対応のレスポンシブなテーブルを実装できる「tabellajs」

    tabellajsはタッチに対応したレスポンシブで操作性のよいテーブル…

  5. simpleSlideShow

    JavaScript

    カスタマイズしやすいシンプル・軽量なスライドショー「simpleSlideShow」

    simpleSlideShowは、シンプルで軽量なスライドショーを実装…

  6. Animsition

コメント

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

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

最近の記事

  1. cheero Power Mountain mini 30000mAh CHE-110
  2. 帆布カメラインナーケース B-2タイプ
  3. 雨粒

アーカイブ

PAGE TOP