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

时间:2011-07-21 16:45:57

标签: php javascript html

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

function displayProducts(){     

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

2 个答案:

答案 0 :(得分:3)

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

喜欢的东西:

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

答案 1 :(得分:1)

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

  1. 淡出现有的,加载的gif变得可见。
  2. 等待加载新产品的回调(ajax电话或你在那里做什么?)
  3. 当您收到回调信息时,您就会淡入新产品。正在加载gif hidden。
  4. Nice loading gif generator:http://www.ajaxload.info/

相关问题