備忘録

備忘録:prettyPopinで開くポップアップページに画像を表示する場合の注意点

投稿日:2013年10月25日 更新日:

「iPad Air」「iPad Mini Retina」来月発売ですね。皆さんは購入されますか?私は「iPad Mini Retina」を在庫が潤沢になった頃に買う予定です。実はこのような仕事をしながらRetinaディスプレイモデルを所有していないので、もっぱらXCodeのシミュレータでの確認しかできていないので、そろそろ買おうかと思っています。

ということで本題

prettyPopinで開いたページに画像が入ることって有りますよねその際の注意点です。

  • 表示する画像サイズが非常に大きい場合(今回の例では1枚10MB以上の写真がありました)
  • <img>タグにサイズを指定できない場合
  • 開かれたポップアップウィンドウ内でスクロールをしたくない場合

上記のような条件でポップアップを開いた場合、ブラウザはイメージデータを全て取得できるまで表示するイメージデータの高さを取得することができません。prettyPopinでは自動的に開かれるポップアップウィンドウ内のコンテンツ全体の高さを取得して開く大きさを決めていますが、「回線の速度」、「PCの性能」、「表示するイメージの枚数」などにより、Javascriptの処理がページの高さを算出するまでにイメージデータを取得できない場合があります。

このような場合、prettyPopinは高さを算出する時点でのコンテンツ全体の高さを下に、開くウィンドウの高さを決定しますので、開かれたウィンドウの高さよりコンテンツの高さが高いため、ページ下部のコンテンツが表示できない状態が発生します。

ポップアップウィンドウに表示するイメージデータには高さを明示的に設定しましょう

今回の私の場合は「すでに大量のイメージデータがアップロードされていたため、表示データ用のサムネイルを再度作るのはことができない」ため、画面表示時に表示するイメージテータの高さを指定してGDを使い圧縮し表示することで対応しました。そもそもは初期設計時の要件定義漏れなので緊急的に対応しましたが、本来は要件定義時に画像アップロード時にサムネイル用のリサイズしたデータを作っておけば、こんなことにならなかったのですが・・・

GDを使った画像リサイズについてはまた今度書きたいと思います。

ad

ad

-備忘録
-, ,

執筆者:


comment

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

スパム対策 * Time limit is exhausted. Please reload the CAPTCHA.

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

jQuery tooltipの備忘録

Concrete5の外部フォームの記事は業務多忙の為、遅れています。期待している方がもしもいらっしゃったらばすみません・・・ 今日はjQueryのtooltipに関する備忘録です。 jQueryのto …

MAC OSX10.9 Mavericksをクリーンインストール・USBメモリ編

先日、Mac OSX10.9 MavericksをMBAにクリーンインストールを書きましたが、iMacもクリーンインストールすることにしました。折角なので、USBメモリをインストールメディアとして使用 …

備忘録:prettyPopinで開くポップアップが元のページより縦長の場合

久々の更新です、ご無沙汰しています。 とある案件で、ポップアップウィンドウを多用する物があったので 昔から使っているprettyPopinを使用して開発を行なっています。 開かれたポップアップが元のペ …

iMac再インストール:Eclipseにテーマを適用

iMacの再インストールが終わりましたが 色々と環境設定が残っています。 今日は私が使っているIDEのEclipseにテーマを適用する方法の備忘録 Eclipseのエディターはデフォルトのままでは背景 …

備忘録:jQueryで追加されたDOM要素にイベントを割り当てる

jQueryを多用して、WEBベースの管理システムを開発中です。 append等で、初期表示されたHTMLに要素を追加する際の注意点 Javascriptでは初期表示された際の各要素にはイベントが割り …