在DOM / Isotope加载时显示某些内容

Question

目标

在DOM /同位素加载时显示加载gif。

问题

当有人访问我的应用程序时，可以在屏幕上看到Isotope / DOM struturing。我的意思是，有可能看到元素的组织 - 这是非常不专业和丑陋。

我的一些代码

同位素（jQuery） - 在窗口加载时加载：

    jQuery("ul.products-list").isotope({
        itemSelector: "li",
        masonry: {
            gutterWidth: 15
        }
    });

我拥有什么

无。我甚至不知道从哪里开始。

提前致谢。

Answer 1

我相信同位素有一个回调。用它来淡化产品

ul.products-list {
   display:none;
}


jQuery("ul.products-list").isotope({
    itemSelector: "li",
    masonry: {
        gutterWidth: 15
    }
}, function(){ $(this).fadeIn() });

Answer 2

Masonry将“砌体”css类添加到容器中。所以你可以用css做到这一点：

ul.products-list {
   background-image:url(loading.gif);
}
ul.products-list.masonry {
   background-image:none;
}
ul.products-list li {
 display:none;
}

ul.products-list.masonry li {
 display:block;
}