掲示板サイトで、情報を事前に取得しておくことの是非について

Question

###背景
twitterやreditでは、マウスホバーでその情報がバルーン表示されるという下図のような機能があり、この情報の取得はajaxで実装されているように思われます。

###質問
質問ですが、ここでホバーされるHTMLに、次のようにdata-userというデータ属性にしたjsonで情報を持たせておくのはいかがなものでしょうか？

<a href="/user/smith" data-user="'{"age":"20","avatar="&lt;img src=&quot;http://example.com/images/&quot; class=&quot;avatar&quot; alt=&quot;&quot;&gt;""}'">
smith
</a>

そしてホバー時にHTMLに成型し、それをバルーン表示します。

$('a').hover(
    function() {
        // ホバーでバルーン表示
        var userData = JSON.parse( $(this).attr('data-user') )
        var userHTML = `
            <div id="userHTML">
                <p>年齢：${userData.age}</p>
                ${userData.avatar}
            </div>`;       
        $(this).after( userHTML );
    },
    function() {
        // 非表示
        $('#userHTML').remove();
    }
);

こうすると、ajaxで通信完了するまでのまどろっこしさがなく、jsonをHTMLに成型するだけで瞬時にバルーン表示できると考えたのですが、なぜこうなっていないのか不思議です。

もちろんホバーされる前から不要かもしれない情報を取得しておくのもどうかと思うのですが、しかし個人的にはホバー時に瞬時にバルーンが表示される方が良さげに感じます。

みなさんはいかが思われますか？
何かデメリットや問題等ございますでしょうか？

Comments

[m.ts10806]

タイトルと内容が合っていないように思いますが

Answer 1

なぜこうなっていないのか不思議です。
もちろんホバーされる前から不要かもしれない情報を取得しておくのもどうかと思うのですが

そのとおりです。

個人的にはホバー時に瞬時にバルーンが表示される方が良さげに感じます。

ホバーがアニメーションで表示されるような場合、ロード時間が数十ミリ秒程度で済むなら、操作感にほぼ影響はありません。

Comments

[maisumakun]

あとは、「初期ロード時には取得せずに、表示されてから徐々に取得しておく」という方法もあります。

ファーストビューをどれだけ早く表示できるかがサイトの値打ちにも関わってきますので、最初の時点で余分なものは一切ロードしない、というのもそれはそれで合理的です。

[milmilmimi]

徐々に取得というのもいいですね。ありがとうございました。