誰かのためにデザインをして、なにかを作る。
そうして過ごす時間が好きです。

Infinite ScrollをWordPressに実装したときにiPhoneで画像が表示されない時の対処法

Infinite ScrollをWordPressに実装したときにiPhoneで画像が表示されない時の対処法

Googleなんかでも採用されている“無限スクロール”をサイト制作の際に実装しました。

使用したのは『Infinite Scroll』。WordPressでは無料公式プラグインも出ていますが、今回はJavascript版を使っています。プラグインを多用すると動作が遅くなりやすく、SEOにも影響が出てくるので細かいものはなるべく使わないようにしているのです。

あれよこれよといった感じで実装まではこぎつけたのですが問題がひとつ。パソコン・Chromeのエミュレータ・Android OSでは問題なく動作していますが、iPhoneだと次ページ読み込み分の画像が表示されない!

タイトルやボックスは表示されているので動作自体はしている様子…、試行錯誤の末なんとか解決法を見つけられたのでここに書き置きます。

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

WordPress に Google 風の無限スクロールを実装

WordPressの画像に自動設定されるsrcset属性を無効化する方法

BACK SCROLL