スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

スクロールすると画像が読み込まれる 「LazyLoad」jQueryのプラグイン

LazyLoad jQuery プラグイン

ネットサーフィンをしていたら、かっこいいサイト発見
スクロールすると、そのスクロールに合わせて画像が表示されるのです。

真似したくなって、Googleで調べたら、
「LazyLoad」(jQueryのプラグイン)と言うモノらしい。

画像を多く配置しているページの場合、、、
ブラウザ画面に表示された時に、画像の読み込みを開始するので、
転送量や負荷を抑え、サーバー負担軽減になるそうです。


早速このブログに導入してみました。
スクロールすると画像が次々と表示されると思います。
その方法の覚え書き


2つのスクリプトをダウンロード(jQuery)

  1. http://jquery.com/ のページでダウンロード、
    テキストエディタ(メモ帳)などにコピー&ペーストし、
    ファイル名:jquery.js で保存します。
    jquery.js ダウンロード
    jquery.js ダウンロード

  2. http://www.appelsiini.net/projects/lazyload の約90行目あたり、
    「Download Latest source or minified.」という個所を探してください
    テキストエディタ(メモ帳)などにコピー&ペーストし、
    ファイル名:jquerylazyload.js で保存します。
    LazyLoad jquery.lazyload.js ダウンロード
    LazyLoad jquery.lazyload.js ダウンロード


<head>~</head>内にソースを記述



※「アップロード先のURL」を書き換えてください。
※「space.gif」はまだ読み込んでない画像の代替画像です。
 私は1ピクセル×1ピクセルの、透過画像を用意しました。
 space.gif→space.gif


オプション|必要に応じて、数字等変えてください

  • placeholder:"アップロード先のURL/space.gif" (代替画像のパスを指定)
  • threshold:"200" (表示前に読み込むピクセル数。デフォルトは0)


  • event:"scroll" (※デフォルト スクロールで画像表示)
  • event:"click" (代替画像をクリックすると、画像表示)
  • event:"sporty"
    (タイマー表示 詳細は「Movable Type 備忘録」さんが解りやすいです)


  • effect:"show" (※デフォルト 普通に表示)
  • effect:"fadein" (画面が次第に明るくなり表示される)


  • failurelimit:"10" (同時に読み込む数。デフォルトは0)

Clip to Evernote Twitter つぶやく スクロールすると画像が読み込まれる 「LazyLoad」jQueryのプラグイン をはてなブックマークに追加 ドロップシッピング ブログランキング

check!この記事を見た人は下記も見てます q(^ ^)

FLASHのプラグインをダウンロードしてください 2010-08-21


コメント

Secret

このページのトップへ



このページのトップへ

▼プロフィール


HN:dairy

SEOのみでがんばってます。『アクセス解析の鬼』をめざしてますw

メッセージ
メッセージは
こちらからどうぞ♪


≫ 相互リンク一覧

≫ 相互リンクを申し込む

もしもde願いが叶うなら♪feed
概要購読全文講読

Twitter
Twitterでつぶやいてます


ランキングに
参加しています♪

FC2Blog Ranking

blogram ブログラム

にほんブログ村 小遣いブログ ドロップシッピングへ

にほんブログ村 デザインブログ グラフィックデザインへ

にほんブログ村 主婦日記ブログ 兼業主婦へ

▼記事検索


▼WordPress MU

    WorePress mu の歩き方

▼MTOS

    MTOS の歩き方

▼Joomla

    joomla の歩き方

▼無料会員登録

もしもドロップシッピング 無料会員登録

▼わたしが利用したもの

SEOのみでプラチナ会員に到達しました! 私の必須ソフト、SEOに強い!
AQUAS アクアスの記事へ

クールでかっこいい、Movable Type と WordPress のテンプレート。モバイルサイト同時作成できるから、ズボラな私には嬉しいです♪
クールでかっこいい MT & WordPress テンプレート

2日間でショップがつくれちゃう!! 驚きの WordPress テーマ。コレでショップ大量生産中...
かんたんDSくん+

商品を選んで貼るだけ、3日間で2,295点つくれるDSテンプレート!
ドロップシッピングのための専用ホームページテンプレート ドロップシッピングのための専用ホームページテンプレート

私はこれでオリジナルFlashつくってます!
簡単Flash作成ソフト

無料版をダウンロードできます! 動作確認できて安心です♪ 軽快なウイルス対策ソフト!
ウイルス対策ソフト

SEO強化に!ドメイン取得♪ 独自ドメインだと、サーバーの引っ越しも楽々です。

MySQL30個で大満足です! ドロップシッパー御用達レンタルサーバー、マルチドメイン無制限!

やっぱり使いやすい! 公認講師の方に勧められた格安サーバー。マルチドメイン利用可能な「チカッパ!プラン」利用してます(^ ^)

安さで選びましたw 1か月たったの200円! マルチドメイン・ PHP・CGI・MySQL にも対応♪

会員登録(無料)すると、1日5点無料ダウンロードできます♪
paylessimagespaylessimages

会員登録(無料)すると、1日15点無料ダウンロードできます♪
Fotolia
FotoliaFotolia
Fotolia

私が参考にしている本たちです♪ 〔新刊順〕
≫ dairyの本棚 ≪



特待生の時にちょっとだけトライ。単価1円からのWeb集客広告、Yahoo! スポンサードサーチ!

▼つながり

あわせて読みたいブログパーツ

▼ブログパーツ

》 PING送信 《

▼カウンター

このページの先頭へ

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。