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

【问题标题】：How to load a page with gravatar and jquery?如何使用 gravatar 和 jquery 加载页面？
【发布时间】：2010-09-24 02:37:42
【问题描述】：

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

【问题讨论】：

不确定是什么问题。当页面完成加载并且您的脚本执行时，是否存在您不想要的快速重新渲染周期？您是否尝试过不加载 Gravatar 的页面？
是的，我试过没有gravatar的页面，看起来还不错。（角会立即变圆）

标签： jquery asp.net-mvc gravatar

【解决方案1】：

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

【讨论】：

【解决方案2】：

听起来你的 gravatar 加载脚本在外观修改 jQuery 调用之前执行。有什么方法可以手动调用 gravatar 加载？如果是这样，您可以使用 jQuery 的 document.ready 先调用您的外观更改，然后调用 gravatar 加载。这样一来，您就不必等待 gravatar 完成，然后再运行“更重要”的 UI 更改。

【讨论】：

【解决方案3】：

这里是working JsFiddle demo 如何使用 JSONP 调用 API 来获取用户的 gravatar 个人资料

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


    });

【讨论】：