môme

なんでもかんでも手を出していく

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' );

参考にした記事

以下の記事に助けていただきました…!ありがとうございます。

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

Safari not displaying loaded srcset images

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

RELATED POSTS

COMMENT

LEAVE A COMMENT

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。

RANKING
下書きが溜まりに溜まってサイトには何も上がらない件
『ましろウィッチ』を始めて気になる事とか
「引きこもりライダー隼」の件で思う、死にたい気持ちについて
スキルがあるならランサーズ利用を一考する話
使ってみたい!無料のゆるかわフリーイラスト「いらすとん」
ABOUT ME

mome

新しいものと辛いものがすき。
中学生時代に独学でWEB制作を始めて、ハタチを超えてからITベンチャーや大手企業子会社のWEB部門に勤務。今は独立してWEB制作したり、メディアサイト運用したり、気ままに暮らしています。

LATEST
CATEGORY
TAG
ARCHIVE