Webデザイン

【jQuery】Google マップをウインドウ内に入ったタイミングで読み込む

投稿日:

店舗一覧ページなどで複数のGoogle マップを表示する場合、非常にページが重くなってしまいます。
今回はGoogle マップがウインドウ内に入ったタイミングで読み込むことで、ページが重くなってしまうのを回避します。

jquery.inviewで要素がウインドウ内に入ったタイミングで処理を行う

まずはGithubからjquery.inviewをダウンロードしましょう。
ダウンロードしましたらjquery.inviewとjquery本体を読み込みます。

要素がウインドウ内に入ったタイミングで処理をするには下記のように書きます。

ウインドウ内に入った時にGoogle マップを読み込む

まず、htmlの記述ですが、Google マップの埋め込みコードのsrcをdata-srcに書き換えてGoogle マップを読み込まないようにします。

次にjavascriptですがGoogle マップのiframeがウインドウ内に入ったらdata-srcの中身をsrc内に書く処理をするので、下記のように記述します。

下記のif文はウインドウ内に入ったタイミングで一回だけ実行するように、srcの値が空の時に実行するという条件分岐です。

srcが空であれば、data-srcの中身をsrc内に書く処理になります。

以上!!







-Webデザイン
-, , , , ,


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

e-ネコショップの404(Not Found)ページをトップページにリダイレクトさせたい

e-ネコショップを使用したECサイトで「サイトURL/index.html」にアクセスすると下記のような404(Not Found)ページが表示されるが、 http://www.kokusanunag …

プロフィール

プロフィール

よーすけ

よーすけ

三軒茶屋でフリーランスのWEBデザイナーをしています。

詳しくはこちら  twitter

過去記事(月別)

カテゴリ