如何使用gravatar和jquery加载页面？

Question

我正在使用 gravatar 为每个在页面上发布故事的用户加载头像。 我还使用 jquery 来圆化页面上某些 span 元素的角。 不幸的是，看起来从 gravatar 中获取头像是在应用 jquery 效果之前发生的（如果没有 gravatar 代码，元素会立即四舍五入），因此元素在网站上可见后外观会立即发生变化。 有什么办法可以解决这个问题吗？ （我使用的是asp.net mvc）

Answer 1

我想你是使用 url 加载 gravatars，而不是 ajax 等。
document.ready() 将在 DOM 加载时执行，而不一定在加载所有（gravatar）图像时执行。 您可以尝试在您的情况下使用 window.onload 事件。

Answer 2

听起来好像您的头像加载脚本是在外观修改 jQuery 调用之前执行的。 有什么办法可以手动调用头像加载吗？ 如果是这样，您可以使用 jQuery 的 document.ready 首先调用您的修饰更改，然后调用 Gravatar 加载。 这样，您就不会在“更重要”的 UI 更改运行之前等待头像完成。

Answer 3

这是工作 JsFiddle 演示如何使用 JSONP 调用 API 来获取用户头像配置文件

   $("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); });


    });