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

hatenaロゴ

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

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

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

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

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

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

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

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

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

参考になるブログ・Webサイト
Stronghold Archive - jQuery iframeの読み込み完了後のタイミングで処理を実行する方法
Home Made Garbage - 動的追加要素の読み込み完了後にイベント追加

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

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

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