以下の内容はhttps://simadzu.hatenablog.com/entry/blog-cardより取得しました。


はてなのブログカードを遅延読み込み

はてなロゴ

はてなのブログカードですが、ブログ本体が表示されたあとにバラバラと表示されるのが気になったので対策してみました。

内容としては、はじめにブログカードを隠しておいて、ブログカードの読み込みが完了したら、ブログカードを表示するという流れです。

ブログのヘッダにブログカードを隠すCSSを書き込むJavaScriptを入力します。

(設定→詳細設定→「<head>要素にメタデータ」を追加にコードを入力)

JavaScript
<script>
    document.write('<style>.embed-card { visibility: hidden; }</style>')
</script>

ブログのフッタにブログカードを表示するCSSを書き込むJavaScript(jQuery)を入力。

(デザイン→カスタマイズ→フッタにコードを入力)

jQuery
<script>
document.addEventListener('DOMContentLoaded', function() {
    $('.embed-card').load(function() {
        $('.embed-card').css('visibility','visible');
    });
});
</script>

デザインCSSにブログカードを隠すCSSを書くと、JavaScriptがオフのときにブログカードが見えなくなってしまうので、JavaScriptでCSSを書き込むことにしました。
(noscriptタグの中にブログカードを表示するCSSを書く方法もありますが)

Stronghold Archive|jQuery iframeの読み込み完了後のタイミングで処理を実行する方法
Home Made Garbage|動的追加要素の読み込み完了後にイベント追加

- 追記 -
JavaScriptのコードを次のとおり変更しました。

(デザイン→カスタマイズ→フッタにコードを入力)

jQuery
<script>
document.addEventListener('DOMContentLoaded', function() {
    if($('.embed-card')[0]) {
        $('.embed-card').load(function() {
            $('head').append('<style>.embed-card { visibility: visible; }</style>');
        });
    }
});
</script>



以上の内容はhttps://simadzu.hatenablog.com/entry/blog-cardより取得しました。
このページはhttp://font.textar.tv/のウェブフォントを使用してます

不具合報告/要望等はこちらへお願いします。
モバイルやる夫Viewer Ver0.14