WordPress jQueryは動作しているがPCブラウザのファーストビューのみ 原因は何が考えられますか？

Question

ワードプレス初心者です。

↓こちらのページを参考に、トップページ（固定ページ）の画像をSPとPCで別のものに設定しています。
https://takayakondo.com/image-switching/

SPで見た際の画像表示は何も問題ありません。

PCで見た場合、
ページはこのようなレイアウトで、サイトを開いた時にFirstViewで表示される１番上のみpc用の画像が表示され、
２番目以降はsp用の画像が表示されます。

そこから（例えば）６番目までスクロールし、そこでウィンドウをリロードするとそこで初めて６番目のpc用の画像が表示されます。

また、一度デベロッパーツールで表示を変更したり、単純にブラウザの幅をドラッグして変更するとこの現象はなくなります。
ローカル環境で作業していた時は何も問題なかったのですが、サーバーに上げたところ、こうなりました。

一応動作自体はしているので、
これは、jQueryやコードの問題ではなく、サーバーとデータベースの話なのでしょうか…初心者には手に負えなさそうなので、こちらで質問させていただきます。

関係がありそうな　index.php/footer.php/functions.php　のコードも一緒に書いておきます。

識者の方、宜しくお願い致します。

index.php

<?php get_header(); ?>
<main>
        <div class="container">
            <div class="top-inner">
                <a href="<?php echo esc_url(home_url('/xxx/')); ?>" class="top-image">
                    <img src="<?php echo get_template_directory_uri(); ?>/images/xxx_sp.jpg" alt="" class="responsive_img">
                </a>
                <div class="top-textbox-r">
                    <a href="<?php echo esc_url(home_url('/xxx/')); ?>" class="more-l">more</a>
                    <a href="<?php echo esc_url(home_url('/xxx/')); ?>" class="work-detail-l">
                        <p>xxx</p>
                    </a>
                </div>
            </div> 

            <div class="top-inner">
            略
            </div>
            <div class="top-inner">
            略
            </div>
            <div class="top-inner">
            略
            </div>
            <div class="top-inner">
            略
            </div>
            <div class="top-inner">
            略
            </div>
        </div>
    </main>
  
<?php get_footer(); 

footer.php

        <div class="copyright">
            &copy; 2021 xxx
        </div>
</footer>

<script>
jQuery(function($){
$(function() {
var $elem = $('.responsive_img');
var sp = '_sp.';
var pc = '_pc.';
var replaceWidth = 600;
function imageSwitch() {
var windowWidth = parseInt($(window).width());
$elem.each(function() {
var $this = $(this);
if(windowWidth >= replaceWidth) {
$this.attr('src', $this.attr('src').replace(sp, pc));
} else {
$this.attr('src', $this.attr('src').replace(pc, sp));
}
});
}
imageSwitch();
var resizeTimer;
$(window).on('resize', function() {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {
imageSwitch();
}, 200);
});
});
});
</script>

<?php wp_footer(); ?>


</body>

</html>

functions.php

add_theme_support( 'title-tag' );

remove_action( 'add_option_new_admin_email', 'update_option_new_admin_email' );
remove_action( 'update_option_new_admin_email', 'update_option_new_admin_email' );
function wpdocs_update_option_new_admin_email( $old_value, $value ) {
update_option( 'admin_email', $value );
}
add_action( 'add_option_new_admin_email', 'wpdocs_update_option_new_admin_email', 10, 2 );
add_action( 'update_option_new_admin_email', 'wpdocs_update_option_new_admin_email', 10, 2 );

//jQuery読み込み
function my_scripts() {
	wp_enqueue_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );


add_theme_support( 'post-thumbnails' );

Comments

[webgoto]

勘ですがスクロールされるまで画像を読み込まないような処理（遅延ロード）が行われているような気がします。
each()の下にconsole.log()を追加してみて、読み込み時に各画像に正しくsrcが設定されているか確認してみてはどうでしょう。

$elem.each(function() {
console.log('src=', $(this).attr('src'));//追加

コンソール画面で確認し、表示が空になっていなければ別の原因ですが。

[NS2021]

回答くださり、ありがとうございます。

教えていただいた様にconsole.log()を追加してみましたが、何も変わりませんでした。。。
コンソール画面には、１番目画像のspとpc用画像、２〜６番目のsp用画像のみのsrc要素の表示が出てきました。。。

[webgoto]

console.log()は結果を確認するために追加したものですので、動作は変わらなくて大丈夫です。
やはり最初の段階では1つしかimg要素がなく、ウインドをリサイズした時にimg要素が増えているように思います。
コンソール画面を開いたままで実行すると、1つだけ(pc画像の数と同じ)結果が表示され、その後、ウインドウをリサイズすると6行の結果が表示されませんか？

[NS2021]

ここの返信欄に添付できなかったので、質問欄の一番下に添付を追加しました。

サイトを開き、コンソール画面で一番最初に表示されるのはこの結果で、あとは仰しゃる通りウィンドウをリサイズすると結果が増えていきます。

[webgoto]

ご確認ありがとうございます。画像が変わらない原因はわかりました。
1度目の動作の2行目、(5)src= data:image/gif...となっている部分は2枚目～6枚目の画像のurlなのですが、1ピクセルのgif画像に置き換えられています。
そのため本来画像のurl内に「_sp.」という文字があれば「_pc.」と置き換えてPC用の画像を表示するのですが、「_sp.」という文字が見当たらないため、pc画像に置き換わりません。
gif画像に置き換える理由は、ページの読み込みを早くするためで、最初にテキストや表示領域にある画像のみを読み込んだ後、時間が空いてから残りの本来の画像を読み込むという動きをします。
wordpressのプラグインにはこのような機能を持ったものがあるのですが、lazy load(遅延読み込み)系や画像最適化系のプラグインを使っていませんか?
またはJetPackプラグインでも遅延読み込みを有効化できます。

[NS2021]

仰しゃる通り、EWWW Image Optimizerを使っており無効化したところ、ちゃんとpc用画像が表示されるようになりました！！！ありがとうございます！！

コンソール画面でもspとpcの２種類ずつ計12の結果のみ表示されています。本当にどうもありがとうございました。

ちなみにですが、このサイトはポートフォリオサイトのため投稿ページに画像を多く使っており、遅延読み込み系のプラグインを引き続き使いたいと思っています。
教えていただいたJetPackを試してみることにします。

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

[webgoto]

解決したようでよかったです。
すみません「JetPackの機能で遅延読み込みを有効化されていたらNGです」という意味で書いてます。

[NS2021]

そうなんですね。

少し質問の方向がずれてしまいますが、
今回のような場合でプラグインを使いたい場合は、各プラグインそれぞれ試してみてjQueryを邪魔しないか確認してみるしか方法はないのでしょうか？
画像はアップロードをする前にすでに圧縮・最適化を済ませたものを上げているので、もう少しサクサク表示されても良いと思うのですが。。。

[NS2021]

諸々自分で調べてみます。
本当に助かりました。ありがとうございました！