スクロールした時点で画像を読み込むようにするWpプラグイン-jQuery Image Lazy Load WP

スクロールして画像が表示される場所にきた時点で画像を読み込んでくれるWordpressプラグインです。画像点数などが多い場合に、ページ全体の表示が遅くなったりと言う事を回避できます。

設定方法

WordPress › jQuery Image Lazy Load WP « WordPress Pluginsよりzipファイルをダウンロードします。

プラグインのページよりzipファイルをアップロードし、プラグインを有効化します。

基本的にはこれだけで画像の読み込み方を変えてくれます。

だたこれだけだと、ページの全ての画像をに対して読み込みを遅らせてしまうので、サイドバーに表示する画像の読み込みも遅くなってしまいます。その為、プラグインの編集から読み込みを送らせる部分の要素を指定する必要があります。方法は以下です。

1. ダッシュボードのプラグインの項目の”プラグイン編集”をクリックします。
プラグイン編集をクリック

2. 右上の”編集するプラグインを編集”の箇所でjquery lazy load pluginを選択します。

3. ”プラグインファイル”の一番上の”jquery-image-lazy-loading/jq_img_lazy_load.php”を選択します。
jquery-image-lazy-loading/jq_img_lazy_load.php を選択

4. ファイルの中程に”jQuery(“img”).not(“.cycle img”).lazyload({”という箇所がありますので、
jQuery(“img”).not(“.cycle img”).lazyload({ というかしょ
jQuery(“img”)のimgの箇所を読み込みを送らせるのを設定する要素を指定します。
このブログの場合はメインコンテンツのIDが”main”だったので下のように書き換えました。
要素を指定

これでメインコンテンツ部分だけ読み込みを遅らせる事ができます。プラグインを使用すると本当に簡単に設定できて便利ですね。

Related Article

1 Comments & Tracbacks

Leave a Comment

Emailは公開されません。*は必須項目です。


*


Categorys

Tags

CSS3 ダッシュボード ヘッダー jQueryプラグイン スライドショー トラブル コードサンプル コンテンツ Facebook 素材 php 引っ越し お知らせ JavaScript カテゴリー Shareボタン CSS IE 投稿タイプ レスポンシブ seo Photoshop Macアプリ ナビゲーション タクソノミー HTML5 WPセキュリティ Git カスタムメニュー サイドバー PHPリファレンス SVG API query_posts WP使い方 RSS iTunes データベース コメント function 条件分岐 get_posts() スマートフォン Sass/Compass マルチサイト機能