Как загрузить страницу с помощью Gravatar и JQuery?

Question

Я использую граватар для загрузки аватаров для каждого пользователя, который публикует историю на странице. Я также использую jquery для скругления углов некоторых элементов span на странице. К сожалению, похоже, что захват аватаров из граватара происходит до того, как будут применены эффекты jquery (без кода граватара элементы сразу округляются), поэтому элементы меняются по внешнему виду сразу после того, как их видят на сайте. Есть ли способ обойти это? (Я использую asp.net mvc)

Answer 1

Полагаю, вы загружаете граватары, используя URL-адреса, а не AJAX и т. Д. document.ready () будет выполняться при загрузке DOM, а не обязательно при загрузке всех (gravatar) изображений. Вы можете попытаться использовать событие window.onload в вашем случае.

Answer 2

Вот рабочая демоверсия JsFiddle , как получить пользовательский профиль gravatar, используя вызов 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); });


    });

Answer 3

Звучит так, как будто ваш скрипт граватационной загрузки выполняется до вызова jQuery, модифицирующего внешний вид. Можно ли как-нибудь вручную вызвать граватарную нагрузку? Если это так, вы можете использовать документ jQuery.ready, чтобы сначала вызвать ваши косметические изменения, а затем вызвать граватационную загрузку. Таким образом, вы не будете ждать окончания действия граватаров до того, как будут запущены «более важные» изменения пользовательского интерфейса.