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

Question

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

Answer 1

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

Answer 2

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

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); });


    });