Tips

Bloggerに画像を遅延表示させるプラグインを導入してみました lazyload

最近ブログでよく見かける
Lazyload
スクロールすると画像がホワッと出てくるアレです
ブログを読み込みの際に画像を見える部分だけを読み込むので
ブログの表示が速くなるというメリットがあります
あと、カッコいいと思います
導入は簡単ですので
是非如何ですか??
DSC_8295

まず
Bloggerの管理画面から
「デザイン」→「HTML編集」を選択
「テンプレート編集」の項目で
ウィジェットのテンプレートを展開にチェックを付けます
その下のコードがズラズラならんでいますが
</head>という項目を探して
その直前に下記のコードを追加すれば完了です


<!-- Start jQuery -->
<script src='http://www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>google.load(&quot;jquery&quot;, &quot;1.4&quot;);
</script>
<!-- End jQuery -->

<!-- Start Lazy Load -->
<script src='<a href="http://sites.google.com/site/customizeyourblogger/jquery.lazyload.mini.js">http://sites.google.com/site/customizeyourblogger/jquery.lazyload.mini.js</a>' type='text/javascript'/>
<script type='text/javascript'>$(function() {$(&quot;.post-body img&quot;).lazyload({
effect : &quot;fadeIn&quot;});});
</script>
<!-- End Lazy Load -->


①プラグインの動作に必要なJqueryの読み込みを設定

②実際にLazyloadと呼ばれる遅延ロードのプラグインを読み込み

これだけで導入でき

かつブログの表示が速くなるので

是非お試し下さい

関連記事

  1. Tips

    【Tips】アドレスバーからTwitterへつぶやける Chrome標準機能で楽々投稿

    Twitterへの投稿、つぶやきをChromeのアドレスバーから…

  2. Tips

    【Tips】Buffaloテラステーションで使用禁止文字列を一括検索する方法

    Buffaloテラステーションで使用禁止文字列のファイルが存在…

  3. Tips

    【Tips】 Gmailで迷惑メールを自動的に削除する方法

    Gmailでは自動でスパムメールなどを振り分けてくれる機能がありますが…

  4. Tips

    関西電力から計画停電の案内が届きました。 お知らせメール登録しました

    いよいよ関西にも計画停電の案内が来ました。ただこのハガキですが…

  5. Tips

    【まとめ】14ツール PDFを作成、編集、変換できるフリーソフトをまとめてみました

    色々とこのブログでPDFを作成したり、編集したり、変換できるフ…

コメント

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

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

PAGE TOP