画像を大量に使うサイトなら絶対必要!Lazyによる画像表示を遅延させることで読み込み負荷を和らげる!

, , No Comments
そんな夢の様な実現をついにこのブログにも実装させることが出来ました…!しかし、そこである問題が発生…。そのデメリットとメリット的なものを挙げてみるよ!もちろん幾千のブロガーさんが試して「そんなの知ってた」状態に陥るかもしれないけど、ブログ初心者でも必死に頑張って試行錯誤してるんだなぁ…という気持ちを抱きながら温かい目で見守ってあげて…!

デメリット


○アイキャッチ画像として使ってるimgタグに書き加えるとサムネイルトしての機能が働かなくなる。srcタグを置き換えることになるのでそのせいかブログのホームページに飛んだ時、NoImageとなってしまう。よって今の管理人の技量ではサムネイルを遅延させて読み込ませることは出来ない。
↓参考例↓


○サムネイルがNoimageを解消させようとimgタグ内に、srcとdata-originalを一緒に書き込むと、ページが読み込みされるとき、一瞬だけ画像が表示され、その後フィードインするイベントが発生する。なんだか不格好な上結局読み込みが重くなるといった印象を与えてしまう…。
↓参考例↓

メリット


○アイキャッチ画像として使うサムネイル画像だけdata-originalを使わずsrcのままにして、サムネイル画像として使わない画像に対してはとても有効だということが解った。
↓参考例↓





スクロールしてみて!





























































○実装がめちゃくちゃ簡単。

○画像を大量に使うサイト様、ブログ様にはもってこいのスペシャルグッズ的な存在…ッ!



ついにこのブログにも…遅延させることでとても優雅に魅せれるだけの技量が宿ってしまったのか…。寝ずに、このブログの半分ほどの記事に「src="画像URL"」の記述を「class="lazy" date-original="画像URL"」へ手動で変えてました(`・ω・´)キリッ

だがしかし…、そのアイキャッチ画像ことサムネイルとしての機能を果たしていないことに気づいたのは半分までの作業が終わってからであった…。(´°̥̥̥̥̥̥̥̥ω°̥̥̥̥̥̥̥̥`)ポロポロ…。
なので今はとりあえずブログのホームページに飛んだ時、1ページ目だけサムネイルに「class="lazy" date-original="画像URL"」を使わないようにしています…。とても残念ですが今からあの作業を修正しなおすなんて今の僕の活力ではとても無理なので断念することになりそう…。

その肝心の遅延させながら画像を読みこませることが出来る「Lazy」の実装手順をご説明しようと思います。

Lazyの実装の仕方


1.必要なものを手に入れてくる。http://plugins.jquery.com/lazyload/
ダウンロードしたファイルの中の「jquery.lazyload.min.js」を取り出して自分用のURLを作って下さい。


2.head内か/bodyの直前にこのコードを設置しておく
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="ダウンロードしたjquery.lazyload.min.jsを自分用のURLに置き換える"></script> 
<script>
jQuery(function($){
  $("img.lazy").lazyload();
});
</script>

3.エフェクトを施したいimgタグに下記を付け加える
<img class="lazy" alt="画像詳細" data-original="画像URL" width="幅の数値" height="高さの数値">

ひとまずこれだけで実装はされますが、フェードインや表示される時間帯などを操作したい場合は紫色の箇所を次のように書き換えます。

4.読み込みを開始させる位置を決める
jQuery(function($){
    $("img.lazy").lazyload({
        effect: 'fadeIn',
        effectspeed: 1000, //1000=1秒
        threshold: 300 //画面に入る300ピクセル手前で読み込み開始
    });
});

5.フィードインを開始する秒数を決める
jQuery(function($){
    $("img.lazy").lazyload({
        effect: 'fadeIn',
        effectspeed: 1000 //1000=1秒
    });
});

6.画像をスクロールで表示させるのではなくクリックすることで読み込みを開始させる
jQuery(function($){
    $("img.lazy").lazyload({
        effect: 'fadeIn',
        effectspeed: 1000, //1000=1秒
        event: 'click' //デフォルトは'scroll'
    });
});

7.参照サイトはこちら!
http://www.webdesignleaves.com/wp/jquery/1335/


どうですか…ッ!思いっきり徹夜してたおかげで今日(11月28日)の朝鼻血を出してました(;・∀・) 寝不足で鼻血を出すことはこの19年間で初めての出来事だったので正直驚いてますwww 寝不足で鼻血とかアニメの世界の話かと思ったら普通に存在するんですね…ってくらいの認識でしたが改めることにします…。 これでアイキャッチ画像ことサムネイル以外の画像を表示させる際に、読み込みに負荷を与えること無く…。ストレスが貯まること無く訪問してくれる読者さんが少しでも増えますように…。 終わり。

0 コメント :

コメントを投稿

※閲覧記事と無関係なコメントはスパムとみなす場合がございます。
(ㆁωㆁ*)管理人がコメントを承認するまで表示されません(ㆁωㆁ*)

ARCHIVE

top