Infinite ScrollをWordPressに実装したときにiPhoneで画像が表示されない時の対処法
Googleなんかでも採用されている“無限スクロール”をサイト制作の際に実装しました。
使用したのは『Infinite Scroll』。WordPressでは無料公式プラグインも出ていますが、今回はJavascript版を使っています。プラグインを多用すると動作が遅くなりやすく、SEOにも影響が出てくるので細かいものはなるべく使わないようにしているのです。
あれよこれよといった感じで実装まではこぎつけたのですが問題がひとつ。パソコン・Chromeのエミュレータ・Android OSでは問題なく動作していますが、iPhoneだと次ページ読み込み分の画像が表示されない！
タイトルやボックスは表示されているので動作自体はしている様子…、試行錯誤の末なんとか解決法を見つけられたのでここに書き置きます。
INDEX
iPhoneでInfinite Scrollが上手く動作しない時の解決法
bufferPxやviewportの記載を変えると良いという記事も見かけましたがこちらでは解決しなかったので割愛します。数年前の対処法だったので、すでに公式で対応完了しているはず。
そこで調べていて行き着いたのが、「srcset」の問題。
srcsetとはHTML5に実装されたレスポンシブ用コードのひとつ。ディスプレイやブラウザのサイズに合わせて表示する画像を出し分けることができるもので、WordPressにもVer.4.4から実装され、デフォルトで出力されるようになっているのです。
srcsetへの対処
<script>～</script>内にあるInfinite Scrollに対する設定用のコードの後に以下のどちらかを追記します。
jQuery
#containerには各自使用している記事一覧の囲み要素(idまたはclass)を記入します。
jQuery(function($) {
$('#container').on('append.infiniteScroll', function(event, response, path, items) {
$(items).find('img[srcset]').each(function(i, img) {
img.outerHTML = img.outerHTML;
});
});
});
Vanilla JS
.postには各自使用している記事ループ部分の囲み要素(.class)を記入します。
var infiniteItem = document.querySelectorAll('.post');
infScroll.on('append', function(response, path, items) {
for (var i=0; i < items.length; i++) {
reloadSrcsetImgs(infiniteItem[i]);
}
});
奥の手！srcsetを無効化
プラグインの競合などが原因となって、上のどちらでもダメだったら、srcsetをなかったことに…という荒業。
functions.phpに以下を記載することで無効化できます。
add_filter( 'wp_calculate_image_srcset_meta', '__return_null' );
参考
Safari not displaying loaded srcset images
