スクロールした時点で画像を読み込むようにする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プラグイン php 引っ越し 素材 お知らせ JavaScript Facebook CSS カテゴリー 投稿タイプ IE HTML5 Shareボタン seo レスポンシブ Photoshop タクソノミー ナビゲーション カスタムメニュー Git Macアプリ サイドバー WPセキュリティ SVG iTunes PHPリファレンス API WP使い方 query_posts データベース get_posts() 条件分岐 コメント function RSS スマートフォン Sass/Compass さくらVPS