Android4.2系の標準ブラウザで「ページが応答しません」となる場合の対処法 ~カルーセルでyoutube動画埋め込み~

原因：基本的にはメモリの問題だと思います

あまり詳しく調べてませんが、たくさん画像読み込んで　かつ　youtubeの埋め込み動画とかも読み込んでいるページでよく起きているようです。

そのため、下記、二つの側面から対応策を考ました。

• 端末側の対応

• サイト側の対応

※以下は、レスポンシブ対応しているサイト前提の話となります。(bootstrapを使用しています)

■端末側の対応

• ブラウザの設定で、「デスクトップ版サイトをリクエストする」にチェックを入れてアクセスする。

恐らく使用できるメモリが増えた状態でリクエストされるので正常に動作する可能性が上がります。
「PC版サイトを表示する」みたいな表記の場合もあるようです。

■サイト側の対応

youtube動画を遅延読み込みにする

ただし、遅延読み込みの方法は色々あります。

• ファーストビューでの表示領域以外にyoutubeの埋め込みがある場合

echo.jsを使用する⇒YouTube動画の遅延読み込みができるEcho.js - 星屋工作室ブログ

• カルーセル内でyoutube動画読み込みしている場合

レアかもしれませんが、自分はこのパターンだったので下記のように対応しました。

youtube動画は最初に読み込まず、1pxの透明画像として読み込んでおく。

<div id="carousel_main" class="carousel slide" data-ride="carousel" data-interval="8000">
            <div class="item active main01">カルーセルコンテンツ１</div>
            <div class="item active main02">カルーセルコンテンツ２</div>
            <div class="item active main03">
                <div class="embed-responsive embed-responsive-16by9 margin-20">
                    <img src="../img/spacer.gif" class="youtube">
                </div>
            </div>
        </div>

カルーセルの切り替わりをフックして、youtube動画埋め込みのカルーセル表示の場合のみiframeのyoutube動画にjavascriptで書き換える

    <script type="text/javascript">
    $(function () {
        var youtubeLoad = false;
        $('#carousel_main').on('slid.bs.carousel', function (e) {
            @*youtube動画のカルーセルが表示されている時のみロードする*@
            if (!youtubeLoad && $(".main03").hasClass("active")) {
                $(".youtube").after('<iframe class="embed-responsive-item" src="//www.youtube.com/embed/hogehoge" allowfullscreen></iframe>').remove();
                youtubeLoad = true;
            }
        });
    });
    </script>

上記の対応で「ページが応答しません」は再現しなくなりました。
直接的な原因はわかってないですが、とりあえずこれで問題なさそうです。