lazyloadで画像が表示される場合とされない場合がある

前提・実現したいこと

企業サイトにてlazyloadを使用して画像の表示を行っているのですが
直接indexにアクセスした際には画像が表示されず、
サイト内遷移で別のページからリンクでindexに移動してきたときには
正常に画像が表示され、原因がわからず困っています。
（外部業者が作成したサイトなのですが、作成者と連絡が取れず…）

もしお分かりになる方いらっしゃれば
解決策をご教示いただきたいです。
よろしくお願いいたします。

該当のソースコード

<!DOCTYPE html><html lang="ja"><head>
	<script type="text/javascript">
(function() {
  var didInit = false;
  function initMunchkin() {
    if(didInit === false) {
      didInit = true;
      Munchkin.init('415-QAA-453');
    }
  }
  var s = document.createElement('script');
  s.type = 'text/javascript';
  s.async = true;
  s.src = '//munchkin.marketo.net/munchkin.js';
  s.onreadystatechange = function() {
    if (this.readyState == 'complete' || this.readyState == 'loaded') {
      initMunchkin();
    }
  };
  s.onload = initMunchkin;
  document.getElementsByTagName('head')[0].appendChild(s);
})();
</script><script async src="https://www.googletagmanager.com/gtag/js?id=UA-124198304-1"></script><script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date)</script><script>!function(e,t,a,n,g){e[n]=e[n]||[],e[n].push({"gtm.start":(new Date).getTime(),event:"gtm.js"});var m=t.getElementsByTagName(a)[0],r=t.createElement(a);r.async=!0,r.src="https://www.googletagmanager.com/gtm.js?id=GTM-T9BW95T",m.parentNode.insertBefore(r,m)}(window,document,"script","dataLayer")</script><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,viewport-fit=cover"><title></title><meta name="description" content="><meta property="og:type" content="website"><meta property="og:url" content="https://headlight-inc.com/"><meta property="og:site_name" content="HEADLIGHT"><meta property="og:image" content="https://headlight-inc.com/asset/img/og.png"><meta property="og:image:width" content="1200"><meta property="og:image:height" content="630"><meta property="fb:app_id" content="2221521717858065"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:title" content="HEADLIGHT"><meta name="twitter:description""><meta name="twitter:image" content="https://headlight-inc.com/asset/img/og.png"><style type="text/css">.mti-inactive{margin-top:0!important}#wpadminbar{display:none}</style><script src="//webfont.fontplus.jp/accessor/script/fontplus.js?vIuE32kT1as%3D&box=o9jZAckSQm4%3D&timeout=60&aa=1&ab=1"></script><script src="//font.realtype.jp/api/script/v4" data-rt-user="pwRQBECuiwdPuScxDRYsuOWj2xTKKlpn"></script><script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="//cdnjs.cloudflare.com/ajax/libs/protonet-jquery.inview/1.1.2/jquery.inview.min.js"></script><script src="//cdnjs.cloudflare.com/ajax/libs/jquery.pjax/2.0.1/jquery.pjax.min.js"></script><script src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script><script src="/asset/js/headlight.js?ck=1023"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery_lazyload/1.9.7/jquery.lazyload.min.js"></script><link rel="stylesheet" type="text/css" href="/asset/css/headlight.css?ck=1023"><link rel="icon" href="/asset/icon/favicon.ico" type="image/vnd.microsoft.icon"><link rel="apple-touch-icon" href="/asset/icon/apple-touch-icon.png" sizes="152x152"></head><body><noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T9BW95T" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript><script>window.fbAsyncInit=function(){FB.init({appId:"2221521717858065",xfbml:!0,version:"v3.1"}),FB.AppEvents.logPageView()},function(e,n,t){var o,s=e.getElementsByTagName(n)[0];e.getElementById(t)||((o=e.createElement(n)).id=t,o.src="https://connect.facebook.net/en_US/sdk.js",s.parentNode.insertBefore(o,s))}(document,"script","facebook-jssdk")</script><div id="page_bg"></div><div id="contents"><div id="_index" class="page_identifier">
    
    <div id="pagination"><a class="bullet" href="javascript:anchor('cover');">HEAD LIFE, HEAD LIGHT.</a> <a class="bullet" href="javascript:anchor('message');">MESSAGE</a> <a class="bullet" href="javascript:anchor('life1');">YUICHI KOGA</a> <a class="bullet" href="javascript:anchor('life2');">JUNKO HAYAKAWA</a> <a class="bullet" href="javascript:anchor('life3');">RYUNOSUKE KONDA</a> <a class="bullet" href="javascript:anchor('life4');">HIROAKI NAMIKI</a> <a class="bullet" href="javascript:anchor('life5');">DAISUKE WADA</a> <a class="bullet" href="javascript:anchor('four');">FOUR</a> <a class="bullet" href="javascript:anchor('recruit');">RECRUIT</a> <a class="bullet" href="javascript:anchor('news_index');">LATEST NEWS</a></div><div id="wrapper"><section id="cover" class="with_rect fit">

<h1>HEAD LIFE, HEAD LIGHT.</h1><a class="container" href="javascript:openPlayer('3fhHvCOaG1c');"><div id="cover_youtube"> </div>
<div class="content layer1">
  <div class="logo"></div><div class="play"></div></div></a></section><section id="message" class="fit"><h1 class="midashi"><span class="nowrap"><span class="only_lxlxxl">&nbsp;</span>切りひらけ、</span><span class="nowrap">自分だけの</span><span class="nowrap">スタイル。</span></h1><span class="container"><span class="bg lazyload" data-src="https://headlight-inc.com/asset/img/bg_message.jpg"></span> <span class="message layer1"><span class="title midashi"></span> <span class="copy midashi"><span class="only_smlxlxxl">href="javascript:openPlayer('y4E2jlU6RxE');"><div class="bg lazyload" data-original="https://headlight-inc.com/asset/img/bg_headlife_1.jpg"></div><div class="rect layer2"></div><div class="content layer1"><div class="number font_light">HEAD LIFE #01</div><div class="title midashi"></div><div class="play"></div><div class="name"><span class="en font_light">HIROAKI NAMIKI</span><br><span class="jp"><span class="name"></span><span class="age">（39）</span><span class="shop"></span></span></div></div></a></section><section id="life_career" class="section"><h2>LIFE CAREER</h2><div class="texts"><div class="title font_light"></div><div class="lead font_light"><span class="nowrap">ヘッドライトは、</span><span class="nowrap">美容師人生の</span><span class="nowrap">キャリアにおいて、</span><span class="nowrap">仕事とプライベートと社会、</span><span class="nowrap">この3つのバランスこそが</span><span class="nowrap">大切だと考えます。</span></div><a class="button black_frame white_background" href="/life-career/">詳細を読む</a></div><div class="image_container"><div class="imgs layer4 left"><div class="img"><img class="lazyload" data-src="https://headlight-inc.com/asset/img/four_1_1.jpg" alt="image"></div><div class="img"><img class="lazyload" data-src="https://headlight-inc.com/asset/img/four_1_2.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="image"></div><div class="img"><img class="lazyload" data-src="https://headlight-inc.com/asset/img/four_1_3.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="image"></div></div></div></section><div class="lead font_light"><span class="nowrap">全国にサロン展開をする</span><span class="nowrap">HEAD LIGHTグループでは、</span><span class="nowrap">美容師の新しいスタイルを</span><span class="nowrap">一緒に創っていく</span><span class="nowrap">パートナーを</span><span class="nowrap">常に募集しています。</span></div><a class="button white_frame transparent_background" href="/recruit/">採用を行なっている<br class="only_xs">店舗を探す</a></div><div id="map"></div></section><section id="news_index" class="font_light"><h2>LATEST NEWS</h2><a class="button black_frame white_background" href="/news/">他のNEWSを読む</a></section></div></div></div>
<footer id="footer"></footer><nav id="global_navigation"><h2>HEADLIGHT</h2><div class="navigation_container"><a class="logo black" href="/"></a><div class="global_navigation font_light"><a class="menu menu1" href="/">HOME</a><br><a class="menu menu2" href="/message/">MESSAGE</a><br class="only_xssm"><a class="menu menu3" href="/news/">NEWS</a><br class="only_xssm"><a class="menu menu4" href="/life-career/">LIFE CAREER</a><br class="only_xssm"><a class="menu menu5" href="/life-support/">LIFE SUPPORT</a><br class="only_xssm"><a class="menu menu6" href="/life-challenge/">LIFE CHALLENGE</a><br class="only_xssm"><a class="menu menu7" href="/commission/">COMMISSION</a><br><a class="menu menu8" href="/recruit/">RECRUIT</a><br class="only_xssm"><a class="menu menu9" href="/about/">ABOUT</a><br class="only_xssm"><a class="menu menu10" href="/contact/">CONTACT</a></div><div class="instagram"><div class="follow_me">follow me!</div><div class="title font_light"><a href="https://www.instagram.com/headlight_official/" target="_blank">OFFICIAL INSTAGRAM<span class="icon">INSTAGRAM</span></a></div>><div class="description">全国のサロンのクリエイティブワークを<br class="only_xss">随時公開中！！</div><div class="stream"><div class="photos hide"></div></div><span class="copyright font_light">&copy;HEADLIGHT INC.</span><a class="privacy font_light" href="/privacy/">PRIVACY POLICY</a></div></div></nav><a id="humburger" href="javascript:toggleGN();"><span class="bar"></span> <span class="bar"></span> <span class="bar"></span></a><div id="player"><div id="player_youtube"></div><a id="plaer_close" href="javascript:closePlayer();"><span class="bar"></span> <span class="bar"></span></a></div><div id="jingle" class="first"><div class="rect black_point2"></div><div class="rect black_point8"></div><div class="rect white"></div><div class="set"><div class="logo_spinner"><div class="logo"></div><div class="spinner"></div></div></div></div></body><script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA61FoRnxbYNP1nGIsVOUWYJwhUv2peYXY&language=ja"></script></html>

行動規範の内容に同意します

回答1件

ベストアンサー

インスタグラムの取得周りでエラーが起きてLazyloadの初期化処理が行われていないようです。
ページ移行の際はインスタの処理は無視されているようで、Lazyloadの初期化処理は行われるため動作するようです。
</body>の閉じタグ前にLazyloadの初期化処理を書けば、とりあえずLazyloadは動作するのではないでしょうか。

html
1<script>initLazyload()</script><!-- 追加 -->
2</body>

投稿2021/09/01 09:43

webgoto

総合スコア1293

mimi_mimi

2021/11/16 01:04

ありがとうございます！試してみたところ、表示されるようになりました～＞＜大変助かりました。ありがとうございます。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！