想要在页面加载期间显示“加载”图像 - Javascript

Question

我使用以下代码显示电子商务网站的产品。在正在加载产品时，图像将逐渐淡出然后再次正常。我想在加载新产品时显示加载图像（如this）。我应该在下面的代码中包含哪些代码来完成这项工作？

function displayProducts(){     

        $('#product_show').fadeOut('slow', function() {
        // Animation complete
            setProducts();
            $('#product_show').fadeIn('slow');
      });
}

Answer 1

我不确定你是#product_show元素是什么，但假设它是某种容器，你可以将该图像附加到它（可能绝对位于中间）。当它竞争时，删除图像。

喜欢的东西：

$('#product_show').append('<img src="..." class="progress"/>').fadeOut('slow', function() {
        // Animation complete
            setProducts();
            $('#product_show').remove('img.progress').fadeIn('slow');
});

Answer 2

我发现最好总是有一个加载gif div，并且一旦加载完成就隐藏/变透明。

1. 淡出现有的，加载的gif变得可见。
2. 等待加载新产品的回调（ajax电话或你在那里做什么？）
3. 当您收到回调信息时，您就会淡入新产品。正在加载gif hidden。

Nice loading gif generator：http://www.ajaxload.info/