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

Question

目标

在加载 DOM/Isotope 时显示加载 gif。

问题

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

我的一些代码

同位素（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 将“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;
}