jquery - gravatarとjqueryでページをロードするには?

Question

私は gravatar を使用して、ページにストーリーを投稿する各ユーザーのアバターをロードしています。また、jquery を使用して、ページ上のいくつかのスパン要素の角を丸めています。残念ながら、jquery 効果が適用される前に gravatar からアバターを取得するように見えます (gravatar コードがないと、要素はすぐに丸められます)。そのため、サイトに表示された直後に要素の外観が変わります。これを回避する方法はありますか? （私はasp.net mvcを使用しています）

Answer 1

ajaxなどではなく、urlを使用してgravatarをロードしていると思います。 document.ready() はDOMがロードされたときに実行されますが、必ずしもすべての(gravatar)画像がロードされたときではありません。あなたの場合、 window.onload イベントを使用しようとするかもしれません。

Answer 2

これは、APIへのJSONP呼び出しを使用してユーザーのGravatarプロファイルを取得する方法の実用的なJsFiddleデモです。

   $("form").on("submit", function(e) {
        e.preventDefault();

        $.ajax("http://en.gravatar.com/" + md5($("#email").val()) + ".json", { dataType: "jsonp" })
        .done(function(result) { 
            for(var idx in result.entry)
            {
                var profile = result.entry[idx];
                console.log(profile);
                $("#displayName").text(profile.displayName);
                $("#avatar").attr("src", profile.thumbnailUrl);
            }
        }).fail(function(result) { console.log("fail", arguments); });


    });

Answer 3

外観を変更する jQuery 呼び出しの前に、gravatar 読み込みスクリプトが実行されているように聞こえます。gravatar ロードを手動で呼び出す方法はありますか? その場合、jQuery の document.ready を使用して、最初に表面的な変更を呼び出し、次に gravatar ロードを呼び出すことができます。こうすれば、"より重要な" UI の変更が実行される前に、gravatars が終了するのを待つ必要がなくなります。