Q&A
画像のファイルサイズと、問題の起こるPCのスペックはどのくらいでしょうか？
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を使用したり読込順を替えてみたりと色々しているのですが改善せずで困ってしまいました。
不具合の可能性について思い当たる点などあればご教授お願いいたします。
回線速度の可能性が高い旨は何度も説明はしているのですが
どうしてもご納得頂けなく、改善しろ！と強く言われていて困っております。
なにか、心当たりのある点でも何でも構いませんのでお気づきがあれば教えていただけると幸いです。
コメントありがとうございます！画像ファイルサイズは全ポップアップ分で合計10MB位です（1ポップアップ内では平均50KBくらい）そんなに危惧するような重さじゃないと思うのですが如何でしょうか？問題の起こるPCスペックは【Windows7 Enterprise Service Pack1 Interl(R) Core(TM) i5-6300 CPU @2.40GHz メモリ8.00GB 64ビット でIE11(11.0.20)】になります。どうぞ宜しくお願い致します。
5k対応と言うので相当大きいのかと思いましたがその程度でしたか。回線でしょうかね
ありがとうございます。やはり、そうですよね...ポケットwifiで接続しているようなので回線かなと思い、何度も説明はしているのですがどうしてもご納得頂けなく、改善しろ！と強く言われていて困っております＞＜
画像は、ポップアップされるまで画面上では見えていないのでしょうか？ それと、ポップアップされる部分のHTMLはどんな感じですか？
質問ありがとうございます。画像は、主に100個あるポップアップのうち、後半（50個目以降〜）で見える時と見えない時があるようです。ポップアップされる部分のHTML（inline）は質問本文の方へ追記しましたので、お手数おかけしますがご確認いただけると幸いです。何卒宜しくお願いいたしますm(__)m
問題のページで、Colorbox以外に動作しているJavaScriptはありますか。Colorboxだけにするなど最低限のページを作って同じ現象が起こるか確かめてみましたでしょうか。
質問ありがとうございます！他に使用しているJavaScriptは、質問本文の方へ追記しました。Colorboxだけにするというのは試してみたのですが、なにぶん私の環境（不具合のおきる環境と同じ内容を用意しました）では、そもそも不具合が起きないので確認できないのです。ちなみに諸事情によりColorboxだけ実装したページでの先方（実際に不具合のおきているPCでの）確認は出来ないのです...痛いですよね。
POPUP用ボタンにはおそらく画像が表示されているのだと思いますが、POPUP後の画像と同じでしょうか？それともサムネイル用の小さい画像でしょうか？今回問題の発生するポップアップは、100個ほどあるうちの後半あたりとのことなので、もしかしたら後半の画像が読み込まれていないので、レスポンスが間に合わず、ポップアップ用画像の読み込みに失敗しているのかな、とも思った次第です。
質問ありがとうございます！POPUP用ボタンは、サムネイル用の小さな画像でとても軽いものを使用しています。ポケットwifiでつないでいるそうなので、私も恐らく、レスポンスが間に合っていないのかなと思っているのですが、こういう場合の画像読込の改善・対応策などはご存知でしょうか？どうぞ宜しくお願いいたします。
回答1件
0
ベストアンサー
画像が表示されないポップアップが出た状態で、【何もせず】しばらく待ってみて、そのうち画像が表示されるのであれば、回線やらPCスペックやらがモノをいう「表示に時間がかかっているだけ」ということで原因は断定できそうかな？と思いますが、、、
自分で確認できない現象は、やっかいですよねぇ^^;
ということで、下記は「表示に時間がかかっているだけ」が、原因の場合のお話です。
ポップアップ部分のHTMLを見る限り、今の状態だと画面を開いた時点で、ポップアップ100個分およそ200枚の画像の読み込みが行われていると思われます。
読み込み順をブラウザに任せると、HTMLの記述の早い順になるので、後ろに書かれているものほど、読み込みが始まって終わるまでの時間がかかることになりますよね。
恐らく、クライアントさんが「ポップアップに画像が出ない！」と言っているのは、
ぱっとみ画面は表示されているけど、ブラウザの「読み込み中のクルクル」が動いている「実はまだ読み込みが完了していない状態」で発生しているのではないかと推測されます。（だからページの下のほうのポップアップで「画像が表示されない」現象が起こりやすいのかも？）
といっても、この状態は、htmlやらjavascriptやらに詳しくない人からすると、「画面が出てるんだから、もう平気だろう」と思われてしまうやつですね。
「環境依存なので、プログラム側ではどうにもできません」の一言で片づけられるなら簡単なのですが、そうはいかないようなので・・・
例えばですが、
ポップアップ内の画像の読込タイミングを調整するのはどうでしょうか。
colorboxのonLoadを使ってみる例です。
■画面を表示したときに画像が読み込まれないよう、ポップアップ内の<img>タグのsrcにはパスを入れず、代わりにdata-srcにパスを入れておきます。
html
1<div class="popWrap"> 2<p class="logo"><img data-src="common/image/logo1.png" width="400" alt=""></p> 3<p class="mainPhoto"><img data-src="common/image/mainphoto1.jpg" width="600" alt=""></p> 4<p class="detail">テキストテキストテキストテキストテキストテキストテキスト</p> 5</div>
■onLoadで、data-srcをsrcに差し替えます。
※オプションで、onLoadを設定するので、colorboxの処理はまとめちゃいました。
※srcの差し替え部分では、無駄な処理を行わないよう、処理済みマーク（クラス）を付けています。
javascript
1$(function() { 2 var winW = $(window).width(); 3 var devW = 639; 4 var option = { 5 inline:true, 6 opacity: 0.1, 7 onLoad: function(){ 8 //srcの差し替え処理してなければ、 9 if(!$(this).hasClass('show')){ 10 //srcの差し替え済みマーク(クラス)つける 11 $(this).addClass('show'); 12 //表示領域内のimgタグを回して処理 13 $($(this).attr('href')).find('img[data-src]').each(function(){ 14 //srcを差し替えて画像を読み込ませる 15 $(this).attr('src', $(this).data('src')); 16 }); 17 } 18 } 19 }; 20 if (winW <= devW) { 21 option['maxWidth'] = "100%"; 22 } 23 $('.popup').colorbox(option); 24});
手間でなければ、「読み込み中」っぽい画像を1枚用意しておいて、ポップアップ内の<img>タグのsrcに全部入れておくといいかもです。
一応、上記コードにて、ポップアップ100個分設置して「Win10&IE11」で動くことを確認しましたが、「Win7&IE11」は手元に実機環境がないので検証しておりません。。
1枚50KB程度の画像2枚を読み込むだけならば、この程度の調整でもいけそうかなと思いました。（もし画像がもっと重たいものになる場合は、これだとcolorboxのポップアップ表示に、画像の読み込みが間に合わないことも有り得ますのでご注意を・・）
この方法は、ポップアップする時に、見たい分だけの画像を読み込んでいるので、ユーザー側も通信量を節約できることになります。（と、あえて言う程のものでもないですがｗ）
注意点は、画像を後からの読み込みにするので、colorboxの表示幅を予め確保しておかないと、表示された際に中身が見切れる可能性があることと、他のライブラリがどのように関わっているかが不明なので、それらによっては上記調整だけでは上手く行かない可能性がありますので、実装される場合そのあたりは適宜調整していただければ・・！
投稿2018/11/26 07:17
総合スコア1910
とても丁寧にご回答いただきありがとうございます！
なるほど、onLoadで、data-srcを使うのですね。
教えていただいた方法で修正し、不具合のおきているPCでもテストしてもらおうと思います。
テストしてもらえるのに少しお時間かかりそうなので...まずはお礼コメントにて失礼しますm(__)m
自分で確認できない現象、ほとほと困り果てていたので、コメントいただけて本当に嬉しいです。
テスト後、再度コメントさせていただきます。
ありがとうございました！
ご回答いただいてからお時間いただいてしまい申し訳ありませんm(__)m
教えていただいたonLoadの方法で早速試してみたところ、注意点で記載いただいていた、表示幅（私の場合は高さでした）の部分がやはり見切れてしまいました。ここの部分はmin-heightでクリアできそうです！
肝心の不具合の起きている環境ではまだ確認していただけていないのですが、これで駄目なら懇親丁寧に「ポケットwifiの速度の可能性が高く、環境依存なのでプログラム側では改善が難しい旨をもう一度伝えてみます。
とても勉強になり助かりました。
ありがとうございました！
あなたの回答
tips
プレビュー
