質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.47%

  • JavaScript

    20945questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    11856questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • jQuery

    8341questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • Windows 7

    414questions

    Microsoft Windows 7は過去にリリースされたMicrosoft WindowsのOSであり、Windows8の1代前です。2009年の7月にリリースされ販売されました。Windows7の前はWindowsVistaで、その更に3年前にリリースされました。

  • Internet Explorer

    339questions

    Internet Explorer(IE;MSIE)はマイクロソフトが開発したウェブブラウザです。Microsoft Windowsに組み込まれています。

Colorboxの画像読込の不具合(Windows7 × IE11)

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 624

watermusic

score 8

Colorboxを使用して、inlineでのポップアップを設定しています。
ポップアップは全部で100個程あり、各inlineの中身は、5k対応の大きめ画像2枚とテキストになります。

イメージ説明

レスポンシブ対応の為、下記のような感じで設定していています。

$(function() {
  var winW = $(window).width();
  var devW = 639;
  if (winW <= devW) {
    $(function() {
        $('.popup').colorbox({
            inline:true,
            maxWidth:"100%",
            opacity: 0.90
        });
    });
  } else {
    $(function() {
        $('.popup').colorbox({
            inline:true,
            opacity: 0.90
        });
    });
  }
  $( window ).on( 'resize', function() {
        $.colorbox.resize();
    } );
});

ポップアップ(inline)のhtmlは下記のような感じです。

<div class="popWrap">
<p class="logo"><img src="common/image/logo1.png" width="400" alt=""></p>
<p class="mainPhoto"><img src="common/image/mainphoto1.jpg" width="600" alt=""></p>
<p class="detail">テキストテキストテキストテキストテキストテキストテキスト</p>
</div>

他に使用しているJavascriptは下記になります。
jquery.colorbox-min.jsの読込位置は変更して試してみましたが改善はなかったので、現在この順番での読込をしております。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><!-- 1.8.0 / 1.7.1 -->
<script type="text/javascript" src="common/js/jquery.colorbox-min.js"></script>
<script type="text/javascript" src="common/js/drawer.min.js"></script>
<script type="text/javascript" src="common/js/iscroll.min.js"></script>
<script type="text/javascript" src="common/js/jquery.matchHeight.js"></script>
<script type="text/javascript" src="common/js/scrollreveal.min.js"></script>

ポップアップ自体は問題なく動作しています。

今回の不具合は、ポップアップを開いた際に、たまに画像が読み込まれずに、画像部分が空白になるという点です。
また、ポップアップを一度閉じて再度開いたり、スクロールすると表示されるようです。
特にページの下の方(主に50〜100個目くらい)のポップアップを開いた時に、この不具合が多いそうです。

不具合の起きる閲覧環境は、クライアントPCの
Windows7(Enterprise Service Pack 1)のIE11での閲覧時のみです。

私のPCでも、Windows7+IE11という同じ環境を作って動作確認しましたが、画像は遅れもなく問題なく表示されます。
他にも有料のブラウザテストツールを使ってテストしても問題なく画像は表示されます。

また、ネット環境はポケットwifiでつないでいるそうなので、速度が関係あるのかな?と思い、4Gのスマホでテストしたり、デベロッパーツールで遅い環境を作ってテストしても、不具合は確認できませんでした。

on loadを使用したり読込順を替えてみたりと色々しているのですが改善せずで困ってしまいました。
不具合の可能性について思い当たる点などあればご教授お願いいたします。

回線速度の可能性が高い旨は何度も説明はしているのですが
どうしてもご納得頂けなく、改善しろ!と強く言われていて困っております。
なにか、心当たりのある点でも何でも構いませんのでお気づきがあれば教えていただけると幸いです。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • watermusic

    2018/11/25 13:14

    質問ありがとうございます!他に使用しているJavaScriptは、質問本文の方へ追記しました。Colorboxだけにするというのは試してみたのですが、なにぶん私の環境(不具合のおきる環境と同じ内容を用意しました)では、そもそも不具合が起きないので確認できないのです。ちなみに諸事情によりColorboxだけ実装したページでの先方(実際に不具合のおきているPCでの)確認は出来ないのです...痛いですよね。

    キャンセル

  • kenshirou

    2018/11/26 15:29

    POPUP用ボタンにはおそらく画像が表示されているのだと思いますが、POPUP後の画像と同じでしょうか?それともサムネイル用の小さい画像でしょうか?今回問題の発生するポップアップは、100個ほどあるうちの後半あたりとのことなので、もしかしたら後半の画像が読み込まれていないので、レスポンスが間に合わず、ポップアップ用画像の読み込みに失敗しているのかな、とも思った次第です。

    キャンセル

  • watermusic

    2018/11/26 15:58

    質問ありがとうございます!POPUP用ボタンは、サムネイル用の小さな画像でとても軽いものを使用しています。ポケットwifiでつないでいるそうなので、私も恐らく、レスポンスが間に合っていないのかなと思っているのですが、こういう場合の画像読込の改善・対応策などはご存知でしょうか?どうぞ宜しくお願いいたします。

    キャンセル

回答 1

checkベストアンサー

+2

画像が表示されないポップアップが出た状態で、【何もせず】しばらく待ってみて、そのうち画像が表示されるのであれば、回線やらPCスペックやらがモノをいう「表示に時間がかかっているだけ」ということで原因は断定できそうかな?と思いますが、、、
自分で確認できない現象は、やっかいですよねぇ^^;

ということで、下記は「表示に時間がかかっているだけ」が、原因の場合のお話です。


ポップアップ部分のHTMLを見る限り、今の状態だと画面を開いた時点で、ポップアップ100個分およそ200枚の画像の読み込みが行われていると思われます。
読み込み順をブラウザに任せると、HTMLの記述の早い順になるので、後ろに書かれているものほど、読み込みが始まって終わるまでの時間がかかることになりますよね。

恐らく、クライアントさんが「ポップアップに画像が出ない!」と言っているのは、
ぱっとみ画面は表示されているけど、ブラウザの「読み込み中のクルクル」が動いている「実はまだ読み込みが完了していない状態」で発生しているのではないかと推測されます。(だからページの下のほうのポップアップで「画像が表示されない」現象が起こりやすいのかも?)

といっても、この状態は、htmlやらjavascriptやらに詳しくない人からすると、「画面が出てるんだから、もう平気だろう」と思われてしまうやつですね。

「環境依存なので、プログラム側ではどうにもできません」の一言で片づけられるなら簡単なのですが、そうはいかないようなので・・・

例えばですが、
ポップアップ内の画像の読込タイミングを調整するのはどうでしょうか。


colorboxのonLoadを使ってみる例です。

■画面を表示したときに画像が読み込まれないよう、ポップアップ内の<img>タグのsrcにはパスを入れず、代わりにdata-srcにパスを入れておきます。

<div class="popWrap">
<p class="logo"><img data-src="common/image/logo1.png" width="400" alt=""></p>
<p class="mainPhoto"><img data-src="common/image/mainphoto1.jpg" width="600" alt=""></p>
<p class="detail">テキストテキストテキストテキストテキストテキストテキスト</p>
</div>

■onLoadで、data-srcをsrcに差し替えます。
※オプションで、onLoadを設定するので、colorboxの処理はまとめちゃいました。
※srcの差し替え部分では、無駄な処理を行わないよう、処理済みマーク(クラス)を付けています。

$(function() {
  var winW = $(window).width();
  var devW = 639;
  var option = {
    inline:true,
    opacity: 0.1,
    onLoad: function(){
      //srcの差し替え処理してなければ、
      if(!$(this).hasClass('show')){
        //srcの差し替え済みマーク(クラス)つける
        $(this).addClass('show');
        //表示領域内のimgタグを回して処理
        $($(this).attr('href')).find('img[data-src]').each(function(){
          //srcを差し替えて画像を読み込ませる
          $(this).attr('src', $(this).data('src'));
        });
      }
    }
  };
  if (winW <= devW) {
    option['maxWidth'] = "100%";
  }
  $('.popup').colorbox(option);
});

手間でなければ、「読み込み中」っぽい画像を1枚用意しておいて、ポップアップ内の<img>タグのsrcに全部入れておくといいかもです。

一応、上記コードにて、ポップアップ100個分設置して「Win10&IE11」で動くことを確認しましたが、「Win7&IE11」は手元に実機環境がないので検証しておりません。。


1枚50KB程度の画像2枚を読み込むだけならば、この程度の調整でもいけそうかなと思いました。(もし画像がもっと重たいものになる場合は、これだとcolorboxのポップアップ表示に、画像の読み込みが間に合わないことも有り得ますのでご注意を・・)

この方法は、ポップアップする時に、見たい分だけの画像を読み込んでいるので、ユーザー側も通信量を節約できることになります。(と、あえて言う程のものでもないですがw)

注意点は、画像を後からの読み込みにするので、colorboxの表示幅を予め確保しておかないと、表示された際に中身が見切れる可能性があることと、他のライブラリがどのように関わっているかが不明なので、それらによっては上記調整だけでは上手く行かない可能性がありますので、実装される場合そのあたりは適宜調整していただければ・・!

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/11/26 16:31

    とても丁寧にご回答いただきありがとうございます!
    なるほど、onLoadで、data-srcを使うのですね。
    教えていただいた方法で修正し、不具合のおきているPCでもテストしてもらおうと思います。
    テストしてもらえるのに少しお時間かかりそうなので...まずはお礼コメントにて失礼しますm(__)m

    自分で確認できない現象、ほとほと困り果てていたので、コメントいただけて本当に嬉しいです。
    テスト後、再度コメントさせていただきます。
    ありがとうございました!

    キャンセル

  • 2018/11/30 16:04

    ご回答いただいてからお時間いただいてしまい申し訳ありませんm(__)m
    教えていただいたonLoadの方法で早速試してみたところ、注意点で記載いただいていた、表示幅(私の場合は高さでした)の部分がやはり見切れてしまいました。ここの部分はmin-heightでクリアできそうです!
    肝心の不具合の起きている環境ではまだ確認していただけていないのですが、これで駄目なら懇親丁寧に「ポケットwifiの速度の可能性が高く、環境依存なのでプログラム側では改善が難しい旨をもう一度伝えてみます。

    とても勉強になり助かりました。
    ありがとうございました!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.47%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • JavaScript

    20945questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    11856questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • jQuery

    8341questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • Windows 7

    414questions

    Microsoft Windows 7は過去にリリースされたMicrosoft WindowsのOSであり、Windows8の1代前です。2009年の7月にリリースされ販売されました。Windows7の前はWindowsVistaで、その更に3年前にリリースされました。

  • Internet Explorer

    339questions

    Internet Explorer(IE;MSIE)はマイクロソフトが開発したウェブブラウザです。Microsoft Windowsに組み込まれています。