質問: 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は下記のような感じです。 ``` テキストテキストテキストテキストテキストテキストテキスト ``` 他に使用しているJavascriptは下記になります。 jquery.colorbox-min.jsの読込位置は変更して試してみましたが改善はなかったので、現在この順番での読込をしております。 ``` ``` ポップアップ自体は問題なく動作しています。 今回の不具合は、ポップアップを開いた際に、たまに画像が読み込まれずに、画像部分が空白になるという点です。 また、ポップアップを一度閉じて再度開いたり、スクロールすると表示されるようです。 特にページの下の方(主に50〜100個目くらい)のポップアップを開いた時に、この不具合が多いそうです。 不具合の起きる閲覧環境は、クライアントPCの **Windows7(Enterprise Service Pack 1)のIE11での閲覧時のみ**です。 私のPCでも、Windows7+IE11という同じ環境を作って動作確認しましたが、画像は遅れもなく問題なく表示されます。 他にも有料のブラウザテストツールを使ってテストしても問題なく画像は表示されます。 また、ネット環境はポケットwifiでつないでいるそうなので、速度が関係あるのかな?と思い、4Gのスマホでテストしたり、デベロッパーツールで遅い環境を作ってテストしても、不具合は確認できませんでした。 on loadを使用したり読込順を替えてみたりと色々しているのですが改善せずで困ってしまいました。 不具合の可能性について思い当たる点などあればご教授お願いいたします。 回線速度の可能性が高い旨は何度も説明はしているのですが どうしてもご納得頂けなく、改善しろ!と強く言われていて困っております。 なにか、心当たりのある点でも何でも構いませんのでお気づきがあれば教えていただけると幸いです。
回答: 画像が表示されないポップアップが出た状態で、【何もせず】しばらく待ってみて、そのうち画像が表示されるのであれば、回線やらPCスペックやらがモノをいう「表示に時間がかかっているだけ」ということで原因は断定できそうかな?と思いますが、、、 自分で確認できない現象は、やっかいですよねぇ^^; ということで、下記は「表示に時間がかかっているだけ」が、原因の場合のお話です。 ポップアップ部分のHTMLを見る限り、今の状態だと画面を開いた時点で、ポップアップ100個分およそ200枚の画像の読み込みが行われていると思われます。 読み込み順をブラウザに任せると、HTMLの記述の早い順になるので、後ろに書かれているものほど、読み込みが始まって終わるまでの時間がかかることになりますよね。 恐らく、クライアントさんが「ポップアップに画像が出ない!」と言っているのは、 ぱっとみ画面は表示されているけど、ブラウザの「読み込み中のクルクル」が動いている「実はまだ読み込みが完了していない状態」で発生しているのではないかと推測されます。(だからページの下のほうのポップアップで「画像が表示されない」現象が起こりやすいのかも?) といっても、この状態は、htmlやらjavascriptやらに詳しくない人からすると、「画面が出てるんだから、もう平気だろう」と思われてしまうやつですね。 「環境依存なので、プログラム側ではどうにもできません」の一言で片づけられるなら簡単なのですが、そうはいかないようなので・・・ 例えばですが、 ポップアップ内の画像の読込タイミングを調整するのはどうでしょうか。 colorboxのonLoadを使ってみる例です。 ■画面を表示したときに画像が読み込まれないよう、ポップアップ内のタグのsrcにはパスを入れず、代わりにdata-srcにパスを入れておきます。 ``` テキストテキストテキストテキストテキストテキストテキスト ``` ■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枚用意しておいて、ポップアップ内のタグのsrcに全部入れておくといいかもです。 一応、上記コードにて、ポップアップ100個分設置して「Win10&IE11」で動くことを確認しましたが、「Win7&IE11」は手元に実機環境がないので検証しておりません。。 1枚50KB程度の画像2枚を読み込むだけならば、この程度の調整でもいけそうかなと思いました。(もし画像がもっと重たいものになる場合は、これだとcolorboxのポップアップ表示に、画像の読み込みが間に合わないことも有り得ますのでご注意を・・) この方法は、ポップアップする時に、見たい分だけの画像を読み込んでいるので、ユーザー側も通信量を節約できることになります。(と、あえて言う程のものでもないですがw) 注意点は、画像を後からの読み込みにするので、colorboxの表示幅を予め確保しておかないと、表示された際に中身が見切れる可能性があることと、他のライブラリがどのように関わっているかが不明なので、それらによっては上記調整だけでは上手く行かない可能性がありますので、実装される場合そのあたりは適宜調整していただければ・・!