Barba.jsで画面遷移したあと、Instagramの投稿埋め込みで画像が読み込まれない

前提・実現したいこと

（数日前に同様の質問をしましたが、情報の追加修正をして改めて質問させていただきました）

Barba.jsを使用しています。
非同期で画面遷移した箇所にInstagramの投稿の埋め込みがあると、
画像が表示されないので、描画させたいです。
フィードではなく、一つ一つの投稿を埋め込みで表示させたいです。

発生している問題・エラーメッセージ

読み込みはされるが、投稿されている画像が下記のような表示になる。
ブラウザをリロードすると正常通り画像が読み込まれて表示される。

該当のソースコード

埋め込みコードは下記のような形です。
（投稿が特定されそうな箇所は置き換えました）

javascript
1<blockquote class="instagram-media" data-instgrm-permalink="https://www.instagram.com/p/hogehoge/" data-instgrm-version="8" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:658px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);">
2  <div style="padding:8px;">
3    <div style=" background:#F8F8F8; line-height:0; margin-top:40px; padding:62.5% 0; text-align:center; width:100%;">
4      <div style=" background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAMUExURczMzPf399fX1+bm5mzY9AMAAADiSURBVDjLvZXbEsMgCES5/P8/t9FuRVCRmU73JWlzosgSIIZURCjo/ad+EQJJB4Hv8BFt+IDpQoCx1wjOSBFhh2XssxEIYn3ulI/6MNReE07UIWJEv8UEOWDS88LY97kqyTliJKKtuYBbruAyVh5wOHiXmpi5we58Ek028czwyuQdLKPG1Bkb4NnM+VeAnfHqn1k4+GPT6uGQcvu2h2OVuIf/gWUFyy8OWEpdyZSa3aVCqpVoVvzZZ2VTnn2wU8qzVjDDetO90GSy9mVLqtgYSy231MxrY6I2gGqjrTY0L8fxCxfCBbhWrsYYAAAAAElFTkSuQmCC); display:block; height:44px; margin:0 auto -44px; position:relative; top:-22px; width:44px;"></div>
5    </div>
6    <p style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;"><a href="https://www.instagram.com/p/hogehoge/" style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none;" target="_blank">hogehoge(@hogehoge)がシェアした投稿</a> -
7      <time style=" font-family:Arial,sans-serif; font-size:14px; line-height:17px;" datetime="20xx-xx-xxTxx:xx:xx+00:00">20xx年xx月xx日xx時xx分PDT</time>
8    </p>
9  </div>
10</blockquote>
11<script async defer src="//www.instagram.com/embed.js"></script>

試したこと

同様の現象がtwitterの投稿埋め込みでも発生しましたが、その場合は、下記のような処理でうまく表示されました。

javascript
1Barba.Dispatcher.on('newPageReady', function (currentStatus, oldStatus, container, newPageRawHTML) {
2    var twscript = document.createElement('script');
3    twscript.setAttribute('async','');
4    twscript.setAttribute('charset','utf-8');
5    twscript.src = 'https://platform.twitter.com/widgets.js';
6    document.body.appendChild(twscript);
7Barba.Pjax.start();
8});
9//非同期通信後に再読み込みするように設定した外部jsファイルにて
10$(window).on('load',function(){
11　　　　twttr.widgets.load(); 
12});

Instagramの場合も、埋め込みコードに入っているスクリプト

を再読み込みさせているのですが、
twitterでいうところの
twttr.widgets.load()
のような、再構築？する関数がわかりません。

どなたかこ存じの方、またその他に良い方法なとありましたら、
ご教授お願いいたします。

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

回答1件

ベストアンサー

window.instgrm.Embeds.process() だと思います。お試しあれ。

投稿2018/05/14 16:11

yhg

総合スコア2161

newmountain

2018/05/16 04:57

回答くださいましてありがとうございます。下記のように試してみたのですが、まだ表示は改善されないままです。。。特にJavaScriptエラーも出ていないのですが。。。 Barba.Dispatcher.on('newPageReady', function (currentStatus, oldStatus, container, newPageRawHTML) { var igscript = document.createElement('script'); igscript.setAttribute('async',''); igscript.setAttribute('defer',''); igscript.src = 'https://www.instagram.com/embed.js'; document.body.appendChild(igscript); }); //非同期通信後に再読み込みするように設定した外部jsファイルにて $(window).on('load',function(){ 　　　　window.instgrm.Embeds.process(); });

yhg

2018/05/16 05:23

その記述だと、初回読み込み時にだけ window.instgrm.Embeds.process() が実行されます。 Barba.js で画面遷移後には実行されません。 embed.js の読み込みが完了したタイミングで実行する必要があります。 newPageReady イベントの中で load-js (https://www.npmjs.com/package/load-js) などで embed.js を読み込ませて、読み込み完了したら window.instgrm.Embeds.process() を実行するようにしなければなりません。それか、最初から https://www.instagram.com/embed.js をHTMLで読み込ませるよう記述しておいて、newPageReady イベントの中で window.instgrm.Embeds.process(); を実行するとか。

newmountain

2018/05/16 07:56 編集

回答くださいましてありがとうございます。画面遷移後に https://www.instagram.com/embed.jsを読み込ませて、 window.instgrm.Embeds.process();を実行させる、というつもりで以下のように記述して試したりもしているのですが、Cannot read property 'Embeds' of undefined とエラーが出てしまいます。 Barba.Dispatcher.on('newPageReady', function (currentStatus, oldStatus, container, newPageRawHTML) { var igscript = document.createElement('script'); igscript.setAttribute('async',''); igscript.setAttribute('defer',''); igscript.src = 'https://www.instagram.com/embed.js'; document.body.appendChild(igscript); window.instgrm.Embeds.process(); }); 初心者で理解が追いつかず申し訳ないのですが、よろしくお願いいたします。

yhg

2018/05/16 08:21

document.body.appendChild(igscript) を実行して即座にスクリプトの読み込みが完了するわけではないので、それではエラーが出ます。読み込んでる最中に window.instgrm.Embeds.process() が実行されてしまいます。 ↑にも書きましたが、load-js などのライブラリを使ってスクリプトの読み込み完了を待たなければならないです。一番手っ取り早いのは、HTMLのほうにあらかじめ <script src="https://www.instagram.com/embed.js"></script> を記述しておくこと。 load-js を使うなら、↓のような感じでしょう。 <script src="//cdn.jsdelivr.net/npm/es6-promise@4.1.1"></script> <script src="//cdn.jsdelivr.net/npm/load-js@3.0.2/index.js"></script> <script type="text/javascript"> . . . Barba.Dispatcher.on('newPageReady', function (currentStatus, oldStatus, container, newPageRawHTML) { if (!('instgrm' in window)) { loadJS([{async: true, url: 'https://www.instagram.com/embed.js'}]).then(function () { window.instgrm.Embeds.process(); }); } else { window.instgrm.Embeds.process(); } }); . . . </script>

newmountain

2018/05/16 09:20

度々ご回答ありがとうございます。 === 一番手っ取り早いのは、HTMLのほうにあらかじめ <script src="https://www.instagram.com/embed.js"></script> を記述しておくこと。 === 先ほどはこちらの意味をよく理解できていませんでしたが、この方法でうまくいきました。丁寧なお答えありがとうございます。

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