jQueryで遅延ロードを汎用的に実現する「ScrollTrigger」プラグイン
jQueryで遅延ロード（遅延読み込み）を汎用的に実現する「ScrollTrigger」プラグインを紹介します。スクロールで要素が表示されたときに任意の関数を実行できます。 当ブログでも、記事ページ本文下にあるソーシャルブックマークボタンとFacebookのLikeBoxの表示にこの仕組みを使っています。 １．目的 Facebookの「いいね！」ボタンなど、最近ソーシャル系のパーツをブログなどに表示している方が少なくないと思います。 ですが、パーツの表示にはJavaScriptを使っているものがほとんどで、そのまま設置するとページのロード時間が遅くなるケースが多く、結果的にページ表示時間に影響することになります。 本プラグインは、そういったソーシャル系のJavaScriptのロードを遅延させることができ、初回のロード時間を短縮したいときに効果があります。 ２．機能 ページをスクロールして、
ブログの画像を後から読み込んでページを軽くするjavascript | 星光のつれづれ日記
ダウンロード 『Lazy Load Plugin for jQuery』 英語のサイトだけど下の方にスクロールするとdownloadがあるから、 sourceの方でもminifiedの方でも好きな方を右クリックでダウンロードしよう。 なぜこのプラグインなのか？ このプラグインを選んだ理由を書いておこう。 画像関係のプラグインでlightboxって言うのがあって、これは画像をクリックすると『うにょ～ん』と画像がポップアップしてくるやつだ。 そのlightboxで僕が使っている『WordPress用lightboxプラグイン作ってみた』と共存できるのが一番の理由だ。 今回紹介した以外の遅延読み込みに関しては『画像の遅延読み込み』を参考にして貰えば良いと思う。 使い方 このjavascriptはjQueryって言う物も必要だ。 ブログで既に使っている場合は良いんだけど、まだの時は以下のコードをヘ
Webサイトの読み込み体感速度が2秒くらい上がるかも。SNSボタンは後から読み込め！ - Web学び
2012年 6月 13日 新しいサーバーでブログをリニューアルして気がついた、SNSボタンの有無でかなり読み込み速度に差がある。といっても2,3秒ほどですが、これは結構命取りだったりします。 まぁ私もそんなに詳しいわけではないので断言できませんが。 ・訪問者はその数秒でサイトから逃げる ・Googleはその数秒を評価基準に入れる たしか遅延ロード(Lazy Load)とかいう技術ですね。 わりとポピュラーなコードで何とかなったので書いときます。 ピュアなJavaScriptではなく、jQuery使いますね。 方法その１ 時限式読み込み body閉じタグの前あたりに書きます。 . . . <div id="snsbox"></div> <script type="text/javascript"> var snscode = 'ここに、SNSのコードを書く' + '一行でつなげても良いが見に
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
syboos.jp
