PreloadJSでクロスドメイン画像をXHR読み込み

2017.07.31

別ドメインサーバーに配置された軽めの画像を先に読み込み、重たい画像を後から読み込むページの実装をしていたのですが、
PreloadJSを使った画像の事前読み込みをしようとした際につまずいた点がありました。

PreloadJSを使ったクロスドメイン画像の読み込み

通常、PreloadJSを使ってクロスドメイン画像を読み込む際はLoadQueueのインスタンスを作る際に引数にfalseを指定します。

こうすることでXHRを使わないタグによる読み込みがされるようになり、クロスドメイン画像でもエラーが起こることなく先読みをすることができるようになります。

引数を空、もしくはtrueにすると、通常は
No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
というエラーが表示され読み込みが出来ない筈なのですが、なぜか読み込みが出来てしまう現象が起こりました。

URLの指定方法による挙動の違い

上に掲載したコードでは、DOMに配置したimgタグを取得し、そのsrcを読み込む画像のsrcに指定することで読み込みをしていますが、画像をDOMに配置せずに、URLを読み込む画像のsrcに直接指定することで、クロスドメイン環境でもXHRでの読み込みが可能になるようです。

今回は軽めの画像は最初からDOMに配置しており、重めの画像に関してはURLを直接指定する形をとっていました。
最初はこの指定が原因であるというが分からず、何故エラーが出る時と出ない時があるのか…、と悩んでしまいました。

また、その他のつまづきポイントとして、一度タグとして読み込んだ画像はキャッシュが残ってしまい、コードを修正してURL直接指定による読み込みに変更しても、エラーが表示されるようになってしまうという点があります。
シークレットモードのChromeでリロードするくらいでは駄目でした。
一度ブラウザを再起動して表示すると、エラーが表示されることなく読み込みができるようになります。

まとめ

PreloadJSでクロスドメインの画像を読み込む際は下記の挙動になるということが分かりました。

  • DOMに配置した画像をXHRで読み込む
    →エラー
  • DOMに配置していない画像をURL直指定でXHRで読み込む
    →読み込み成功
  • 一度DOMに配置した画像をURL直指定でXHRで読み込む
    →キャッシュが残っているとエラー、キャッシュを消すと読み込み成功

今後はこれらの特長を理解した上で、必要に応じて最適な読み込み方をしたいと思います。