追伸ですが、手持ちのiPhone4 の最新iosバージョン7.1.2でも同様に画像表示がされませんでした。

わたしもiPhone 5s ですが、最新のiosは12.1です。
とても可愛く画像は表示されています。

＜追伸＞
自サイトでも「Lazy Loadを有効にする」にして確認しましたが、画像は全部表示されています。
やはり、iPhoneのiosのバージョンに関係があるのではないでしょうか？

ご報告ありがとうございます。

5と5sだと確かにiosが違うんですよね。

私もiPhone 5 以下で起こるのだと思います。

実際の画像を添付いたしました。

うわー、これは悲しいですねぇ。せっかくの可愛い動物さんたちが、、、。
5と5sだと違うんですねぇ。

わたしはPCもiMacなので、iPhone ios 12.0 に上げる際、互換性の関係で渋々MacもMojaveにアップしました。それ以前のiMacは型番が古くて、Safariのサポート切れでどんどん開かないWEBページが増えて、iMacを買い換えました。
iPhoneやスマホもブラウザのサポートが切れた古い機種は切り捨てられる運命かもと思います。

逆に言えば、aozoraahさんの検証によれば、「Lazy Loadを有効にする」をオフにすれば、古い機種のスマホの人にも画像が表示されるという情報は貴重だと思いました。
検証ありがとうございました。

OS が古いのが原因だと思います。（ブラウザのバージョンも関係あるかもしれません。）

試しに、下記のコードを子テーマの functions.php に追加されると、どうなるでしょうか。

function wp_enqueue_lazy_load() {
  if ( is_lazy_load_enable() && ! is_login_page() ) {
    wp_enqueue_script( 'polyfill-js', '//polyfill.io/v2/polyfill.min.js?features=IntersectionObserver', array(), '3.25.1', true );
    wp_enqueue_script( 'lazy-load-js', get_template_directory_uri() . '/plugins/lozad.js-master/dist/lozad.min.js', array( 'polyfill-js' ), false, true );
    $data = 'const observer = lozad();observer.observe();';
    wp_add_inline_script( 'lazy-load-js', $data, 'after' ) ;
  }
}

Akiraさま

お返事ありがとうございます。

ご指示通り設定してみたのですがうまく表示されませんでした。

ブラウザはgoogle chrome とSafariのどちらもうまくいかないようです。

現在、あえて問題のサイトをLazy load有効にしております。

https://xn--hhrx3xt0jt8h4kenrxmi6a.com/zakkan/

どなたか表示がうまくいかない方がおりましたらご意見いただけますでしょうか。

aozoraahさんのサイト『Lazy load有効』でも、iPhone 5s ではキレイに画像が表示されます。
やはり、現象の原因は iPhone のブラウザ(Safari等)のバージョンだと思うのですが、、、。

１つ気になったのは、Cocoonは1.4.7にしておられて、WordPress 4.9.9 という点です。
Cocoon 1.4.7 は、WordPress 5.0 以上のメジャーアップデートに合わせた仕様だと思うので、今後別の不具合が発生する可能性もあるかも、、、と思いました。

実際、うっかり先に Cocoon を更新してから、WordPress 5.0.1 に更新したものは、一瞬バグりました。(ブラウザ：Mac Safari の再起動で直りました。)

こんにちは。

僕の環境の開発ツールでも、iPhone5で表示されませんね。

GoogleAnalyticsでiOS10.3ユーザーの人数を確認できるので、Lazy loadの有効か無効かの判断材料になると思います。

僕が運営する別のサイトでは、iOS10.3ユーザーは全体の1.83%です。そこまでのスピードはいいかなって思うので、Lazy loadは無効にしてます・・・。

うーむ…。

では、こちらのコードを子テーマの functions.php に追加されると、どうなるでしょうか。

すでに削除されているようですが、先程のコードを必ず削除後に追加なさってください。

function wp_enqueue_lazy_load() {
  if ( is_lazy_load_enable() && ! is_login_page() ) {
    wp_enqueue_script( 'polyfill-js', '//polyfill.io/v2/polyfill.min.js?features=IntersectionObserver', array(), '3.25.1', true );
    wp_enqueue_script( 'lazy-load-js', get_template_directory_uri() . '/plugins/lozad.js-master/dist/lozad.min.js', array( 'polyfill-js' ), false, true );
    $data = 'var observer = lozad();observer.observe();';
    wp_add_inline_script( 'lazy-load-js', $data, 'after' );
  }
}

WP Fastest Cache をお使いですので、プラグインのキャッシュ、それとブラウザのキャッシュの削除が必要かもしれません。

Lazy Loadで利用している、IntersectionObserverの対応状況が元々こんな感じですから、やっぱAkiraさんが書かれているように、怪しいのはPolyfillになりますよね。
https://caniuse.com/#feat=intersectionobserver

とりあえず、Akiraさんが書かれたことの結果待ち。

いろいろとアドバイスしていただきありがとうございます。やはり画像が表示されませんでした。キャッシュのクリアは毎回手動で行っております。

コードの追加の方は、このようになるのですが間違っていませんでしょうか？

functions.phpを開くとこのような状態です。以下↓

--------------------------------------------------------------------------------

<?php //子テーマ用関数

//子テーマ用のビジュアルエディタースタイルを適用
add_editor_style();

//以下に子テーマ用の関数を書く
function wp_enqueue_lazy_load() {
if ( is_lazy_load_enable() && ! is_login_page() ) {
wp_enqueue_script( 'polyfill-js', '//polyfill.io/v2/polyfill.min.js?features=IntersectionObserver', array(), '3.25.1', true );
wp_enqueue_script( 'lazy-load-js', get_template_directory_uri() . '/plugins/lozad.js-master/dist/lozad.min.js', array( 'polyfill-js' ), false, true );
$data = 'var observer = lozad();observer.observe();';
wp_add_inline_script( 'lazy-load-js', $data, 'after' );
}
}

MixHostですよね。プラグインのキャッシュも削除済み。ブラウザ例えばFireFoxのアプリを入れて更新後みても同じですよね？

https://wp-cocoon.com/unregister-sidebar/

ここの画像を見ても同じ状況で、表示されませんか？

とりあえずサーバー更新をされる気があれば、支払いを済ませて様子を見るとどうなりますか？

サーバーではなく、ドメインでした。そこも念のためご確認くださいね。

FireFoxでもダメでした。リンク先のページの画像も表示されません。

ブラウザとしてはこれでgoogle chrome、Safari、FireFoxでダメでした。古いiosのせいなんでしょうね。

サーバーはさくらインターネットです。

ドメインの更新とはどんな意味でしょうか。あまり詳しくなくて・・・すみません。

こんにちは。

僕のテスト環境ですが、Laxy loadを試したところ

iPhone5（iOS10.2）で問題なく表示されています。

Akiraさんのコードは入れていない状態です。

Wordpress4.98でも問題なかったです。

サーバは、Xサーバーで親テーマのみです。

ということは、サーバーかプラグイン、子テーマなどで問題が起きてるっぽいですね。

----------------------------------------------
※テスト環境にてURLは伏せています。
コンテンツURL：/wp-content
インクルードURL：/wp-includes/
テンプレートURL：/wp-content/themes/cocoon-master
スタイルシートURL：/wp-content/themes/cocoon-master
使用スキンURL：
Wordpressバージョン：5.0.1
PHPバージョン：7.1.18
ブラウザ：Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36
サーバーソフト：Apache
サーバープロトコル：HTTP/1.1
言語：ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名：Cocoon
バージョン：1.4.7
カテゴリ数：17
タグ数：21
ユーザー数：2
----------------------------------------------
利用中のプラグイン：
All In One SEO Pack 2.10.1
Contact Form 7 5.1.1
Google XML Sitemaps 4.1.0
Redirection 3.6.3
Simple 301 Redirects 1.07
Table of Contents Plus 1601
WordPress Importer 0.6.4
Yoast SEO 9.3
----------------------------------------------

コードの追加方法は正しいです。

最後に、こちらのコードを試していただけないでしょうか。私が iPhone を持っておらず、手元で確認できないので大変お手数をおかけします。

function wp_enqueue_lazy_load() {
  if ( is_lazy_load_enable() && ! is_login_page() ) {
    wp_enqueue_script( 'polyfill-js', 'https://cdn.polyfill.io/v2/polyfill.min.js?features=IntersectionObserver', array(), '3.25.1', true );
    wp_enqueue_script( 'lazy-load-js', get_template_directory_uri() . '/plugins/lozad.js-master/dist/lozad.min.js', array( 'polyfill-js' ), false, true );
    $data = 'var observer = lozad();observer.observe();';
    wp_add_inline_script( 'lazy-load-js', $data, 'after' );
  }
}

読み込もうとしている Polyfill（JavaScript が動かないブラウザでも動くようにする JavaScript）を使ったことがなくて、いまいち読み込み方法が分からない…。

ちなみに、Polyfill.io のものを読み込もうとしています。

Cocoon は別の Polyfill を読み込んで、Lazy Load がどのブラウザでも動くようにしています。ただ、その Polyfill では、iOS 10 以前のバージョンに対応できないと私は予想しています。

＞たなかま様

プラグイン全て停止してチェックしてみたのですが、当方の環境ではダメでした。

＞Akira様

せっかくのコードでしたが、申し訳ありません。うまく表示されませんでした。

iPhone5s移行のiosでは問題ないようなので、諦めてしまうか迷っています。解決にたどりつけなくて申し訳ありません。

フォーラムを開いたままにしていたので、たなかまさんのコメントを読んでいませんでした。

Cocoon 設定 → 高速化の「JavaScriptを縮小化する」も原因の可能性がありますね。

「JavaScriptを縮小化する」に、縮小化を除外するファイルを入力する欄があります。

子テーマの functions.php に追加されたコードを削除後に、この入力欄に下記のようにお書きになると、どうなるでしょうか。

/wp-content/themes/cocoon-master/plugins/polyfill/intersection-observer.js

「JavaScriptを縮小化する」にチェックしたら、不具合が再現できました。

さ、さすがです！

intersection-observer.jsを縮小化から除外しましたが、こちらは不具合が起きたままになりますね。

＞Akira様

解決しました！！！！！！！

諦めかけていましたが無事表示されました。

特殊な環境のささいな問題にこれほど助けていただけたことに感謝感激です。

本当にありがとうございました。

すみません。喜びのあまり確認しないで投稿してしまいました。

高速化の「JavaScriptを縮小化する」にチェックを外すと画像が表示されますが、縮小化除外の欄にコードを入力してもうまくいきませんでした。

本題は核心に近づいてきましたね！

***********

サーバーはさくらインターネットです。

ドメインの更新とはどんな意味でしょうか。

こちらまったく別のサイトをみたのかもしれません。

今確認したらサーバーもsakuraと確認できますし、ドメイン『船橋市動物病院.com（xn--hhrx3xt0jt8h4kenrxmi6a.com）』の更新情報も全く問題ありませんです。※画像どころか全部表示されない状況になるかと思ったけど、違ってました。

ということは、除外するべきは、こっちのファイルかもしれません。

/wp-content/themes/cocoon-master/plugins/lozad.js-master/dist/lozad.min.js

もしくは、先程の intersection-observer.js ファイルと、今回の lozad.min.js ファイルのどちらも、除外しないといけないかもしれません。

除外する入力欄に 2 つ以上のファイルを追加する場合には、1 行に 1 つのファイルを指定します（1 つファイルを追加後に Enter で改行し、次のファイルを追加）。

ただ、もしこれで画像が表示されたとしても、ちょっと問題あり。というのも、JavaScript ファイルがレンダリングをブロックしてしまうので、サイトスピードが遅くなります。

それだったら、Lazy Load を無効にしたほうが、サイトスピードの面では優れていると思います。

iOS 10 以前を切り捨てるのも選択肢の 1 つです。下記のページによると、iOS 10 以前のバージョンのシェアは、全部合わせても約 7% ほどらしいです。

http://smatabinfo.jp/os/ios/index.html

縮小化が原因だとしたら、ライブラリーが原因の可能性もありますね。
親テーマの、lib/php-html-css-js-minifier.phpファイルの中身をすべて以下と、置き換えるともしかしたら、縮小化したままでも解決する可能性もあるかもしれません。
https://gist.github.com/tovic/d7b310dea3b33e4732c0#file-php-html-css-js-minifier-php

お疲れさまです！

Akiraさんのjs除外（2パターンとも）と、わいひらさんのphpファイルの差し替えを試してみましたが、どちらもjsの縮小化で画像は表示されませんでした。

難しいですね・・・。

動作確認ありがとうございます。
一応、原因切り分けのためJavaScriptプラグインフォルダ全てを除外するため以下のように、JavaScript除外設定に入力するとどうでしょう？

/plugins/

＞わいひらさん

すみません。変わりませんでした。

フォルダごと除外できたんですね。

僕の環境でもplugins除外では表示されませんでした。

わいひらさんがご提示された JavaScript プラグインフォルダ全てを除外した時に、「トップへ戻る」ボタンは表示されるでしょうか（スクロールするとページ右下に出てくる上矢印のボタン）。

表示されないなら、User Timing API が怪しいです。

Akiraさん、お疲れさまです。

わいひらさんがご提示された JavaScript プラグインフォルダ全てを除外した時に、「トップへ戻る」ボタンは表示されるでしょうか（スクロールするとページ右下に出てくる上矢印のボタン）。

こちらトップへ戻るのボタンは表示されていませんでした。

iPhone7（iOS12）だと表示されています。

よろしくお願いいたします。

私のiPhone5ではもともとトップへ戻るボタンが表示されないのですが。

ブラウザはgoogle chromeとSafariで同じです。

子テーマの tmp / head-insert.php に、下記の 2 つのコードのどちらを追加されるとどうなるでしょうか。

ただし、同時にコードを追加すると、意図した動作にならないかもしれません。1 つずつ追加しご確認いただけると、大変助かります。

コードは、どちらも notepad.pw に貼り付けています。

コードその 1

https://notepad.pw/share/2291ct63r

コードその 2

https://notepad.pw/share/nfqief2m

コードその２を貼り付けたらiphone5でも画像表示されました！

私の方でもコード2で表示されました。

（コード1だと不可でした）

何度も面倒なご確認をしていただき、ありがとうございました。

「JavaScriptを縮小化する」の有効時に使われる User Timing API が原因でした（performance.mark とか performance.measure とかのやつで、JavaScript のパフォーマンスを計測するもの）。

新しい PageSpeed Insights が User Timing API を使えと言ってくるので、わいひらさんがいち早く対応された記憶があります。

ただ、iOS は 11 からしか対応していないみたいです。

can i use... : User Timing API

なので、Google の Tools for Web Developers がすすめる記事が紹介している Polyfill の user-timing.js を試していただきました。この Polyfill が、コードその 2 です。

まさか、User Timing APIが原因だったとは…。思いつきもしませんでした。
一応、Akiraさんの書き込まれた情報を元に、修正してみました。
https://github.com/yhira/cocoon/archive/master.zip
よろしければ、試してみていただければ幸いです。
当サイトにも適用してあります。

皆様、ありがとうございました。

たまたま普段使っているiPhoneを修理に出すことになり発見したトラブルでしたが、ここまで皆様のお力を借りることになるとは思っておりませんでした。

そして、まさかこんなに短期間で解決していただけるとは思いませんでした。

iPhone5、iPhone4とほとんど使われなくなったスマホですが、これで画像が見れないユーザーがいなくなったと思うとすっきりした気持ちになりました。

今後も何か助けていただくこともあると思いますが、どうぞよろしくお願いいたします。

こちらをもって「解決」とさせていただきます。

本当にありがとうございました。

わいひらさん、ありがとうございます。

テーマを上書きさせていただきました。

僕の環境でも上手く表示されています。

発火ポイントが変わって、さらに自然になりましたね！

おふた方、動作確認ありがとうございます。
aozoraahさんがご報告してくれたおかげで、気づかない不具合を修正できることができました。
こちらこそありがたいです。

またAkiraさんには、問題点をズバッと見抜かれた上に、修正方法まで教えていただき、感謝申し上げます。僕だと、多分そこまでの考えに至らなかったです。

発火ポイントが変わって、さらに自然になりましたね！

こちらも、自分以外の意見を聞きたいところだったので、ありがとうございます。
現在の発火ポイントの方がよさそうな感じですね。