html - モバイル アプリの Reddit エイリアン アニメーションはどのように機能しますか?

Question

モバイル アプリの Reddit Alien アニメーションがどのように機能するかを知っている人はいますか? このアニメーションはロード時間によって変化します。

これは、特定の時間が経過した後に画像を変更するための Ajax 呼び出しによって行われますか?

Answer 1

Snoo の画像がmobile.jsに追加さfetch_more()れます。

function fetch_more()
{
    $("#siteTable").after($("<div class='loading'><img src='" + r.utils.staticURL("reddit_loading.png") + "'/></div>"));
    var a = document.location,
        c = a.pathname.split("."),
        c = c[c.length - 1].indexOf("/") == -1 ? c.slice(0, -1).join(".") : a.pathname,
        a = a.protocol + "//" + a.host + c + ".json-compact" + a.search,
        c = $("#siteTable").find(".thing:last");
    a += (document.location.search ? "&" : "?") + "after=" + c.thing_id();
    c.find(".rank").length && parseInt(c.find(".rank").html());
    $.getJSON(a, function (a)
    {
        $.insert_things(a.data, !0);
        $(".thing").click(function ()
        {});
        $("#siteTable").next(".loading").remove();
        a && a.data.length == 0 && $(window).unbind("scroll")
    })
};

実際のアニメーションは、 ( parent のクラスを介して) compact.cssで行われます。.loadingdiv

.loading img {
    -webkit-animation-name: rotateThis;
    -webkit-animation-duration: .5s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}

どちらのファイルも大幅に圧縮されているため、上記のコード スニペットは、Google で見つけたツールを使用して整形されたバージョンから取得したものです。