このブログでは、
トップページの上の方に、
Flickrにアップされた最新の画像６件が
自動的に表示されるようになっている。
それはJavascriptで動的に実行されるようになっていて、
「window.onload」でその部分の表示を書き換えるようになっている。
つまり、ページの読み込みが完了したら、
Flickrの画像を取得して表示するという動きを実行する仕組み。
window.onloadがFlickr画像取得の関数をフックする。
で、この仕組がうまくいくときといかないときがあって、
その原因がわからなかった。
すこし調べてみたらどうもAmazonのアフィリエイトリンクがあるときに、
動作しなくなっているのがわかった。
Amazonのアフィリエイトリンクはiframeタグで表示されていて、
どうもそのあたりが原因らしい。
iframeの内容を表示するためにurlを指定するのだが、
そのurlの情報の取得が失敗しているがために、
window.onloadが機能しなくて、
結果、Flickrの画像を取得する関数も動作しないということのようだ。
Amazonのリンクは表示はされているし、
ブラウザも一見して取得は完了しているようにみえるので、
そのあたりどうなってるか謎だ。
苦肉の策として、読み込めなかった場合はリンクをクリックすることで、
関数を呼び出して実行させるようにした。
追記：上に書いた問題は解決できなかったのだけど、
別の解決方法を見つけたので書いておく。
上で書いた「表示されない場合はクリックをする」という解決法は、
クリックするという手間があるのであまりうれしくない。
画像のonLoadでも動作のフックになりうるということがわかったので、
それを応用してみた。
なんでもいいからimgタグを書いて、そこに何かしらの画像のurlを指定して、
そこに onLoad="動かしたい関数" と書けばそれでフックになる。
せっかくなのでFlickrのWebページのFlickrロゴに直接リンクを貼って、
それが読み込まれたら画像を取得して表示する関数を動かすという風にしてみた。
うまくいったので、window.onloadで画像を呼び出すのはやめにしました。
-----------
追記２：ちなみにどうやっているかというとこんな感じ。
HTMLのヘッダ部分に下記のように書きます。
<script type="text/javascript" src="flickr-search.js"></script>
このflickr-search.jpというのは下記のサイトを参考にさせてもらいました。
第2回 JavaScriptからFlickr APIで画像検索 - マッシュアップ・ラボ：ITpro
で、Flickrの画像を表示したい部分にこういうふうに書きます。
<div id="photos_here">Loading...</div>
最後に、何でもいいので画像を読み込ませて、そこにonLoadで
画像呼び出しの関数名を書く（この場合はphoto_search）。
<img src="http://l.yimg.com/g/images/en-us/flickr-yahoo-logo.png.v3"
width="50"
onLoad="photo_search({ user_id: '25933488@N07' });">)