移动应用程序上的Reddit Alien动画如何工作?

时间:2013-07-19 12:07:09

标签: html5 css3 jquery mobile

有没有人知道移动应用上的Reddit Alien动画是如何工作的。此动画随着加载时间而变化。

这是通过Ajax调用在经过一段时间后更改图像来完成的吗?

1 个答案:

答案 0 :(得分: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")
    })
};

实际动画在compact.css中完成(通过父.loading的{​​{1}}类):

div

这两个文件都经过严格压缩,因此上面的代码片段来自使用google找到的工具进行美化的版本。