PrimeFacesのExtensionにあるBlockUIはブロックしてる壁の上にコンポを置けるので、アニメーションgifでクルクル回るものと「処理中」ラベルを置いたりしています。
が、なぜかGoogle Chromeでうまく表示されないケースがありました。
条件的には
- PrimeFaces 3.5のgraphicImageを利用
- 表示されないのはPFのcommandButtonを利用、かつajax=falseのもの
(ちなみに普通のh:graphicImageも同様でしたが)
- PrimeFaces Extension 0.6.3のBlockUIを利用
- Google Chromeはバージョン 27.0.1453.94m
(複数台のマシンで同じだったのであまりバージョンは関係ないかも)
- 画像はアニメーションgif、ただし、gif以外の画像などを指定しても同様でした
ぐらいかな…。
もともとJSFの定義では以下のように書いていました。
<p:graphicImage id="imgLoad" value="/resources/images/ajax-loader.gif" />
で、実行結果は
他のブラウザ、例えばFirefoxでは以下のように出ます。
IE、Opera、Safariも正常に表示されて、なぜかChromeだけ…。
これは駄目かと諦めていたのですが、StackOverflowにこんなのが
How to render images in JSF 2.0
むむ、graphicImageにもいくつかの書き方があって、HTMLの出力も違うですとっ。
で、試しに
<p:graphicImage id="imgLoad" library="images" name="ajax-loader.gif" />
としたら動きました!!なにこれ。
ちなみに各々で出力されたHTMLの結果は
上手くいかなかったパターン
<p:graphicImage id="imgLoad" value="/resources/images/ajax-loader.gif" />
↓
<img id="xxFrm:imgLoad" src="/XxService/resources/images/ajax-loader.gif" alt="" />
上手くいったパターン
<p:graphicImage id="imgLoad" library="images" name="ajax-loader.gif" />
↓
<img id="xxFrm:imgLoad" src="/XxService/javax.faces.resource/ajax-loader.gif.xhtml?ln=images" alt="" />
うーむ。この結果から、なぜChromeだけ駄目になるのかイマイチわからない。奥が深い…。