TopJavaScriptjQuery > 2012年11月
2012年11月22日

jQueryで既存サイトの画像を「なんちゃって遅延ロード」する方法

November 22,2012 12:55 AM
Tag:[, ]
Permalink

jQueryを使って、既存サイトの画像を遅延ロードっぽく見せる方法、いわゆる「なんちゃって遅延ロード」について紹介します。

昨日エントリーした「画像を遅延ロードする定番jQueryプラグイン「Lazy Load」」ですが、投稿済み記事の画像に対して設定をひとつひとつ変更するのは現実的に厳しいと思われます。

とはいっても、他のサイトでページをスクロールすると画像がふわっと浮かび上がるアクションには憧れます。

ということで、既存サイトの画像を遅延ロードっぽく表示させる方法を考えてみました。

1.「なんちゃって遅延ロード」と称する理由

「なんちゃって遅延ロード」と称する理由は、ページをスクロールしたときの表示は遅延ロードされたようにみえますが、最初から遅延ロードの設定をしていないimg要素はページロード時に画像が先に読み込まれてしまうためです。

下のスクリーンショットは、遅延ロードの設定有無によるHTTPリクエストの違いを示すものです。

遅延ロードの設定をしているページでは、画像のHTTPリクエストは実行されません(ダミー画像「white.png」のHTTPリクエストのみ実行)。

遅延ロードの設定をした場合のFirebugの表示(スクロール前)
サンプル

ページをスクロールすると順次画像のHTTPリクエストが実行されます。

遅延ロードの設定をした場合のFirebugの表示(スクロール後)
サンプル

これに対し、遅延ロードの設定をしていないページでは、すべての画像のHTTPリクエストが最初に実行されてしまいます。

遅延ロードの設定をしていない場合のFirebugの表示
サンプル

本カスタマイズを利用される場合は上記の挙動の違いを予めご理解ください。

2012.11.22追記:はてなブックマークで「JavaScriptをオフにすると画像が見えなくなる」というコメントありますが、「なんちゃって遅延ロード」ではsrc属性に元画像のURLが記載されているので見えなくなることはありません(本当の遅延ロードでは見えなくなりますが)。

2.遅延ロードっぽくする

遅延ロードを設定していないサイトの画像を遅延ロードっぽくするには、次のjQueryコードをbody終了タグの直前に追加します。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="jquery.lazyload.min.js"></script>
<script>
$('img').each(function(){
    $(this).addClass('lazy');
    $(this).attr('data-original', $(this).attr('src'));
    $(this).removeAttr('src');
    $(this).attr('src', 'white.png');
});
$('.lazy').lazyload({
    effect: 'fadeIn',
    effectspeed: 500
});
</script>

2行目の「jquery.lazyload.min.js」は「画像を遅延ロードする定番jQueryプラグイン「Lazy Load」を参考にダウンロード、インストールしてください。

<script src="jquery.lazyload.min.js"></script>

以下の部分で、既存のimg要素を「Lazy Load」に対応できるimg要素に変更しています。一番下にある「http://user-domain/images/white.png」は遅延ロード前のダミー画像になります。ダミー画像は適宜用意し、URLおよびファイル名も適宜変更してください。

$('img').each(function(){
    $(this).addClass('lazy');
    $(this).attr('data-original', $(this).attr('src'));
    $(this).removeAttr('src');
    $(this).attr('src', 'http://user-domain/images/white.png');
});

以下の部分で画像の遅延ロードを制御しています。オプションの設定等は前述のリンク先の記事を参考にしてください。

$('.lazy').lazyload({
    effect: 'fadeIn',
    effectspeed: 500
});

サンプルも作りましたのでお試しください。

サンプル
サンプル

「なんちゃって遅延ロード」は「Lazy Load」をわざわざ使わなくても実現できそうな気もしますが、今後投稿する記事(あるいは過去記事)の画像を本当の遅延ロードにしたいときにそのまま使えるんじゃないかと思います。

3.遅延ロードする画像を限定する

すべてのimg要素になんちゃって遅延ロードを行いたくない場合は、1項のソースコードに、赤色のように記事部分を特定できるクラス名などを追加します。

…前略…
$('.entry img').each(function(){
    $(this).addClass('lazy');
    $(this).attr('data-original', $(this).attr('src'));
    $(this).removeAttr('src');
    $(this).attr('src', 'white.png');
});
…後略…

記事内にあるアイコンといった小さい画像に適用したくない場合は、さらに画像サイズで判定するといいかもしれません。

...前略...
$('.entry img').each(function(){
    if ( $(this).width() > 100 ) {
        $(this).addClass('lazy');
        $(this).attr('data-original', $(this).attr('src'));
        $(this).removeAttr('src');
        $(this).attr('src', 'white.png');
    }
});
...後略...

4.本当の遅延ロードと混在している場合

本当の遅延ロードと混在している場合、2項や3項のコードをそのまま適用すると、本当の遅延ロードのimg要素が正常に動作しなくなります。

したがって、次のようにhasClassメソッドで判定し、本当の遅延ロードのimg要素に干渉しないようにします。

...前略...
$('.entry img').each(function(){
    if ( $(this).width() > 100 ) {
        if(!$(this).hasClass('lazy')) {
            $(this).addClass('lazy');
            $(this).attr('data-original', $(this).attr('src'));
            $(this).removeAttr('src');
            $(this).attr('src', 'white.png');
        }
    }
});
...後略...

以上です。遅延ロードしていない画像を遅延ロードっぽく表示させたいという方は是非お試しください。

Comments [0] | Trackbacks [0]
2012年11月13日

「ノンプログラマーのためのjQuery生成ツール」作りました

November 13,2012 1:55 AM
Tag:[, ]
Permalink

ノンプログラマーのためのjQuery生成ツールを作ってみました。よければご活用ください。

ノンプログラマーのためのjQuery生成ツール
ノンプログラマーのためのjQuery生成ツール

サンプル表示つき
ノンプログラマーのためのjQuery生成ツール

このツールは「7つのサンプルでjQueryを学ぼう!「jQueryが全く分からない人のため」の超初級者向け入門講座」にインスパイアされて作った、初心者向けのお勉強ツールです。

コールバックなど複雑な設定はできませんが、基本的な設定とメソッドチェーンまでできるようにしています。

追記:イベントとAPIをプルダウンメニューで選択できるようにしました。過不足あればご指摘ください。

追記:イベントとAPIのプルダウンメニューでツールチップを表示できるようにしました。ざっくりした内容ですが、これでイベントやAPIの使い方が分かるようになります。

ツールチップを表示
ツールチップ

やっつけで作ったので中のコードはかなりひどいです。あしからず。

1.使い方

本エントリーの2項から解説していますが、サンプル表示つきのページで入力データと実行結果を見比べれば、なんとなく雰囲気がつかめると思います。

以下、それぞれの項目について解説します。

2.HTML読み込み完了後に実行する

HTML読み込み完了後に実行したい場合、「HTML読み込み完了後に実行する」のチェックボックスをチェックします。

HTML読み込み完了後に実行する

チェックすると、「$(function(){...}」で全体を括ります。

$(function(){
    // ...
}

3.イベント発生で実行する

「イベント発生で実行する」のチェックボックスをチェックすると、入力フォームが表示されます。

(クリックで拡大)
イベント発生で実行する

入力フォームには以下の3項目を設定します。

  • イベント発生対象のid属性・class属性または要素の種別。この部分を設定すれば、id属性値に「#」、class属性値に「.」を付与します。「要素+class属性」などの組み合わせで設定する場合は、空白を選択したあと「#」や「.」を手動で付与してしてください
  • イベント発生対象のid属性・class属性または要素の名称
  • 発生イベント名

上記の設定であれば、次のコードを出力します。

$('#foo').click(function(){
    // ...
}

4.実行時のAPI

jQueryのAPIを設定します。

(クリックで拡大)
イベント発生で実行する

入力フォームには以下の3項目を設定します。

  • API実行対象のid属性・class属性または要素の種別。この部分を設定すれば、id属性値に「#」、class属性値に「.」を付与します。「要素+class属性」などの組み合わせで設定する場合は、空白を選択したあと「#」や「.」を手動で付与してしてください
  • API実行対象のid属性・class属性または要素の名称
  • API名

上記の設定であれば、次のコードを出力します。

$('.bar').css();

5.実行時のパラメータ

jQueryのAPI実行時のパラメータを設定します。たとえばcss()を実行する場合、

css('color','#ffffff');

の「color」や「#ffffff」がパラメータになります。

パラメータが必要な場合は「実行時のパラメータ有無」をチェックします。

実行時のパラメータ有無

チェックした後、パラメータ数設定用のラジオボタンが表示されるので「1つ」または「2つ」を選択してください。

パラメータ数

さらに、選択したパラメータ数に応じた入力フィールドが表示されるので、パラメータを設定します。

「1つ」を選択した場合
「1つ」を選択した場合

「2つ」を選択した場合
「2つ」を選択した場合

文字列・数値はツールで判定して、クォーテーションを自動的に付与します。

6.結果の表示

各データを設定後「実行」をクリックすればテキストエリアにjQueryのコードを出力します。

パラメータ数

チェックボックスのチェック状態やデータの内容によって出力が変わるので、色々試してみてください。

7.メソッドチェーン

メソッドチェーンしたい場合、「メソッドチェーンする」をチェックします。

メソッドチェーン

メソッドチェーン用のフォームが表示されるので、4項(実行対象を除く)および5項と同じように設定してください。メソッドチェーンは何回でも行えます。

(クリックで拡大)
メソッドチェーン用のフォーム

メソッドチェーン用フォームについては、表示・非表示の制御が完璧にできていないので、すいませんがチェックボックスやラジオボタンはきちんと設定してください。

Comments [0] | Trackbacks [0]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3