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と呼ばれる遅延ロードのプラグインを読み込み

これだけで導入でき

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

是非お試し下さい

  • コメント: 0

関連記事

  1. Tips

    英語のYoutube動画に日本語字幕を表示してくれる機能!! 知ってました??

    英語などのYoutube動画に日本語字幕を付ける機能があるのを…

  2. Tips

    ペニーオークションに被害者続出 入札の度に手数料 トラブル急増 注意!!

    ペニーオークションとは格安のオークション出品だが、入札の度に手…

  3. Tips

    Tips 楽天からのメールマガジンの配信を止める

    楽天からのメールっていつの間にかすごい量になっていて迷惑メール…

  4. Tips

    ノートならIE9!? Chromeよりもバッテリーが長持ちするそうです。 ブラウザの消費電力

    とある海外の記事で面白い記事がありましたのでご紹介ノートパソコ…

  5. Tips

    WordPressから各SNSへの連携方法まとめ Twitter Facebook、Google+も…

    このブログですが各SNSへ記事の更新情報を連携、通知しています…

  6. Tips

    【Tips】 ゴミ箱をタスクバーに表示する方法 デスクトップがシンプルに

    デスクトップに常に表示されているゴミ箱をタスクバーに表示する方法です…

コメント

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

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

最近の記事

PAGE TOP