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

    Chromeが遅い!! と感じたら一度ためしてみては シークレットモードが便利

    私も常用しているGoogleChromeですが時折遅いと感じる…

  2. Tips

    そのディスプレイ、疲れませんか?明るさや色合いの設定で見やすくなるかも モニターキャリブレーション

    先日、パソコンの部屋の照明を変えたのですがそれからディスプレイ…

  3. Tips

    【Tips】 IE9、IE10の自動更新を停止するパッチを作ってみました

    まだまだIE8が使いやすいという方も多いと思いますのでIE9、…

  4. Tips

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

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

  5. Tips

    Google Blogger 関連記事を画像付で簡単に Linkwithin

    ブログなどで見かける関連記事などの表示これがあればページビューも伸…

  6. Tips

    【Tips】Chrome高速化 キャッシュを無効にして快適なるかも

    GoogleChromeや他のブラウザを使っていると段々と遅くなる原因…

コメント

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

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

PAGE TOP