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

    JavaScript

    クリーンでシンプルな通知を表示できる「notie.js」

    notie.jsはクリーンでシンプルな通知を表示できるJSプラグインで…

  2. JavaScript

    スクロール時にナビゲーションが上部に固定されるレスポンシブ対応のjQueryプラグイン「HeadSh…

    スクロールするとナビゲーションが上部に固定配置されるjQueryプラグ…

  3. Bootstrap Dropdown Hover
  4. JavaScript

    アイコンをクリックすると周りにメニューが表示されるjQueryプラグイン「FerroMenu」

    FerroMenuというjQueryプラグインを使えばアイコンをクリッ…

  5. JavaScript

    jQueryで好きな要素を浮遊させることができるプラグイン「jqFloat」を使ってみた

    指定した要素をフワフワと浮遊させることができる面白いプラグインを使って…

  6. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryでオブジェクトの型を取得して判定などをしたい場合はjQuery.type()を使う

    jQuery.type(obj)を使えばオブジェクトの型を知ることがで…

コメント

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

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

最近の記事

  1. Waterlogue
  2. macOS Mojaveのダークモード
  3. Olli
  4. 単語帳メーカー(Flashcard Maker App)

Facebookページ

PAGE TOP