HTML5 プリフェッチは優れたツールであり、これまでは画像ギャラリーをナビゲートする際のユーザー エクスペリエンスが大幅に向上していました。ただし、この場合、画像を適切にプリロードできないようです。Chrome 開発ツールでネットワーク タブを表示すると、GET リクエストが処理されていることがわかりますが、ステータスでは (キャンセル) と表示され、タイプは「保留中」です。
これらのリクエストがキャンセルされる理由は何ですか?
基本的な PHP for ループを使用して、JSON 配列を反復処理し、ここで確認できる画像パスを取得しています。
<?php foreach($this->slideShow as $key => $value ) {?>
<link rel="prefetch" href="<?= $value->mainImage ?>">
<?php } ?>
上記のループが実行されたときに返されるものの例を次に示します。
<link rel="prefetch" href="http://cdnl.mysite.com/mp/620/400/leadimage1.jpg">
<link rel="prefetch" href="http://cdnl.mysite.com/mp/620/400/leadimage2.jpg">
<link rel="prefetch" href="http://cdnl.mysite.com/mp/620/400/leadimage3.jpg">
<link rel="prefetch" href="http://cdnl.mysite.com/mp/620/400/leadimage4.jpg">
<link rel="prefetch" href="http://cdnl.mysite.com/mp/620/400/leadimage5.jpg">