先月から今月にかけてと、更新がご無沙汰になりつつあります。
それだけ『RED STONE』へお熱なわけですが、ブログを書きたいのも事実。
優先順位付けというわけではありませんが、そろそろ書いておきたい内容も増えてきたので更新です。
特定の記事で画像が表示されない
自宅では自分のブログを閲覧することがほとんどないのですが、仕事場ではよくチェックしています。
（といってもAdSenseに嫌われるわけにもいかないので、1日最高でも1回2ページ程度と決めていますが。）
ここ最近（というかしばらく前から）気になっていたのが表題の『特定の記事で画像が表示されない』ケースです。
仕事場でチェックしていた際に気付いたのですが、自宅に戻ってから再度チェックしてみると再現しない…。
エンジニア気質とでもいうのでしょうか、再現しない（環境依存）であれば気にする必要が無い、と考えていたのですが、つい先日チェックしたところ自宅でも同様の現象が。
流石に環境依存ではないことが分かれば一大事なので対処しました。
- 特定の記事で、記事内の画像はもとよりメニュー画像やサイドバーの画像も表示されていなかった。
- 開発者コンソールをチェックしたところ、『Uncaught TypeError: $(…).fancybox is not a function』というエラーが発生していた。
- （その後）画像が表示されない記事は、『投稿内に画像を使用しているページ』であることが判明した。
調査内容
まず先述のエラー（Uncaught TypeError: $(…).fancybox is not a function）に関してですが、調べるとすぐに解決方法が出てきました。
一例をあげておきます。
明日から１２月だけどなんか暑い。バスでじっとりと汗をかく。だって沖縄は現在、最高気温２７度とかあるんだぞ？ 温度が高い時と低い時で高低差がありすぎる。最近１０度近く差がある。長袖にした途端、最高気温が２５度以上まで上がるんだもんなぁ。やってられんわ。 さて、今日は技術ネタ。仕事でjqueryライブラリの依存関係でハマってね。同じトラブルで困っている人もいるかもしれないのでメモしておこう。まぁ、プログラマってのはこういうトラブルの解決方法とかの情報はネットで共有するのが基本だ。僕のブログも最初はtechブログとして開設された。最近はなんでもありありの雑記ブログとして更新されているが、過去に書かれ…
時系列がよく分からなくなるかもしれませんが、上記解決方法に辿り着いたのはまだ本件が『環境依存』であると考えていた時期だったので、本質的な回避策にはならないだろうと思い上記対策は行っていません。
次に『環境依存』ではなくなってからの調査ですが、『画像が表示されない』点に着目して調査を行いました。
行きついた先をメモしていなかったためにここでご紹介できないのが申し訳ないのですが、要約すると「画像の表示と使用しているプラグイン『Easy FancyBox』の処理タイミングが異なるせいで発生している」という内容でした。
一時期は『Easy FancyBox』のアンインストールも考えていたのですが、処理タイミングによる不具合であると分かれば対処のしようがあるというものです。
対処方法
結論から言えば、Javascriptを非同期読み込みや遅延読み込みの設定が可能な『Async Javascript』というプラグインの設定内容を変更することで対応することが出来ました。
- Javascript読み込み ⇒ 遅延読み込み
- jQuery読み込み ⇒ 非同期読み込み
私の場合は両方とも非同期か遅延読み込みに設定していました。覚えていなくてすみません。
ちなみに、上記設定から外れると画像は読み込まれるがAdSenseが読み込まれないといったケースも発生しました。
やはり便利だと思ってプラグインをどんどん組み込んでいくのは危険ですね。
まとめ
『Easy FancyBox』や『Async Javascript』といった表示画像に細工を施すプラグインや読み込み方法を変更するプラグインを利用している方が対象となりますが、『特定の記事で画像が表示されない』ケースでは処理タイミングによる不具合を疑うとよいでしょう。
以上です。
スポンサーリンク
