スクロールに応じて画像を遅延読込させるLazy Loadプラグイン
本連載では、JavaScriptライブラリとして利用頻度の高いjQueryとそのプラグインに着目して、その利用例を紹介します。今回はWebページのスクロールに応じて画像を遅延読込させるLazy Loadプラグインを用いて、多数の画像を含むWebページで効率よく画像を読み込む方法を紹介します。 はじめに 一般に画像を含むWebページをWebブラウザで表示する場合、画像が表示されるかどうかに関わらず、すべての画像がWebサーバーからダウンロードされます。そのため、縦に長いWebページに多数の画像が配置されている場合、スクロールしなければ表示されない多くの画像を読み込むために多くのロード時間を費やすことになります。この事象は特に、端末の処理能力が相対的に低く、ネットワーク状況も不安定になりがちなスマートフォンにおいて、より深刻な問題です。 そこで本記事では、Lazy Loadプラグインを用いて画
レスポンシブなサイトを一発でデバイス確認できる便利ウェブサービス - あなたのスイッチを押すブログ
最近、レスポンシブウェブデザインのサイトも増えてきましたね。このブログもレスポンシブ対応していて、色んなデバイスで閲覧できるようになっています。 ただ、制作会社のディレクターとしては、作ったレスポンシブのページをデバイス確認するのが非常に面倒なのです。 PCのウェブブラウザのウインドウサイズを伸び縮みさせてもいいのですが、それでは "どのデバイスで、どんな風に見えているか" が分からない。サイズ感が掴みにくいのです。 かと言って、検証機を５台も６台も並べて確認するのは非常に時間がかかってしまいます。 そこで私が利用しているのが「Responsive Checker」というウェブサービス。 URLを入力するだけで、擬似的に様々なデバイスでサイトを確認できます。また、任意のサイズに変更することもできるので、使い勝手も良い。オススメのウェブサービスです。 レスポンシブなサイトを一発確認 冒頭でお
新人ウェブデザイナーに送る。ウェブデザインブックマークサイト決定版！
おはようございます。CD藤本です。 厳しい冬も終わりを告げ、大好きな春がやって来ました。 桜、誕生祭、キャンプ初め、サイクリング開始。と良いことづくしの春。 当社でも11名の新入社員を迎え入れました。 個性あふれるフレッシュな11名の新人たち。ようこそSOLGへ！！ さて今回は、デザイナーなら誰でも知っていると思いますが、新人ウェブデザイナーのために、ウェブデザインのブックマークサイト・ギャラリーサイトを紹介します。 僕が知っているだけでもこの手のサイトは30サイト以上あります。老舗から新参者、洋物中心のところから和物のみにこだわったところ。縦長にこだわったところからスマホのみに絞ったところ、パーツのみに絞ったところもありますね。 僕が何年も使い続けた結果、ここが至極のブックマークサイト（以下ブクマサイト）だ！という5サイトを紹介します。 （今回はパソコンサイトを扱うブクマサイトに限らせて
[jQuery]画面を一定量スクロールした時にサイドバーなどを固定位置に配置する
当ブログでも採用しておりますが、ブログなどでもよく見かけるようになった、ある一定量画面をスクロールするとサイドバーなどが固定されるﾔｰﾂ。 手順メモを晒しておきます:) 続きましてheadタグ内ないし外部読み込みスクリプトに以下を記述します。 [js] $(function($) { var tab = $(‘.hoge’), offset = tab.offset(); $(window).scroll(function () { if($(window).scrollTop() > offset.top) { tab.addClass(‘fixed’); } else { tab.removeClass(‘fixed’); } }); }); [/js] ↑のスクリプトは.hogeがtopの位置に行ったらfixedというclassを追加、それ以外はclass属性を削除する、と言う命令を
![[jQuery]画面を一定量スクロールした時にサイドバーなどを固定位置に配置する](https://cdn-ak-scissors.b.st-hatena.com/image/square/ac7ae56c20fc639b9d7e08f7f0da2fec804f6625/height=288;version=1;width=512/https%3A%2F%2Fozpa-h4.com%2Fwp-content%2Fuploads%2Fskitched-20121120-005330.jpg)
上（トップ）へスクロールさせるならいろんなシーンで使えるjQueryプラグイン「scrollUp jQuery plugin」
scrollUp jQuery plugin 今や定番となっている「スクロールアップ」ボタン。スクロールしているとあらわれて、クリックするとトップへするするとスクロールしてくれるというボタンです。 インターネットで検索すると様々な「スクロールアップ」ボタンを見つけることができて、迷ってしまいます。 いろいろなシーンに合わせて簡単に利用できて、エフェクトも綺麗なjQueryプラグイン「scrollUp jQuery plugin」がオススメです。 サンプルを作ってみました。 上へスクロールさせるならいろんなシーンで使えるjQueryプラグイン「scrollUp jQuery plugin」サンプル 今のホームページにそのまま組み込むだけで、「スクロールアップ」ボタンの設置が出来ますのでとても簡単で便利です。 設置方法は続きをどうぞ。 【使用方法】 こちらの「scrollUp jQuery p
スクロールしても良い感じにナビゲーションメニューを固定できるjQueryプラグイン『stickyMojo』
サイドバー風のナビゲーションパーツをスクロールさせても一定の場所に固定してくれるのが、このjQueryプラグイン『stickyMojo』です。動作も軽くスムーズで、違和感がない固定のサイドナビゲーションが実装できるので便利です。 サンプルを作ってみました。 → 「スクロールしても良い感じにナビゲーションメニューを固定できるjQueryプラグイン『stickyMojo』」サンプル フッターのコンテンツまでくると、フッターと重ならないように調整してくれますね。このように画面をリサイズしてもメインコンテンツと重ならない、またフッターコンテンツと重ならないように固定できます。 設置の仕方も簡単です。 【使用方法】 まずは、本家の「stickyMojo.js」のサイトからjsファイルをダウンロードします。 ＜head＞の部分にJavascriptを呼び出すコードを記述します。
Google Analyticsにフォーム入力イベントなどを機能拡張するJavaScript「GA Functions」
Google Analyticsにイベント測定などの機能を拡張するJavaScript「GA Funcitons」の説明とダウンロードのページ。 ユニバーサルアナリティクスとGoogleタグマネージャの進化によってイベントトラッキングやクロスドメインのトラッキングが容易に実装できるようになりました。ユニバーサルアナリティクスへの移行に従い GA Functions はその役目を終えていくことになります。これまで多くのWebサイトにご利用いただきありがとうございました。今後のアップデートは脆弱性の対応などを除き終了いたします。 今後は「Googleタグマネージャとアナリティクスの投稿」で、イベント計測や色々なノウハウを発信していきます。 2013年11月16日：ver. 1.4.4を公開。イベントトラッキングで直帰にならないのを防ぐオプションを追加しました。今まではイベントが発生すると直帰に
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
サービス終了のお知らせ
新着記事
出雲周遊 ご縁参りの旅｜星野リゾート 界 【公式】