想要显示“正在加载”页面加载期间的图像 - Javascript [英] Want to show "loading" image during the page loading - Javascript

问题描述

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

I am using the following code for displaying the products of an e-commerce website. While the products are being loaded, the images will slowly fade out and then will come again normal. I want to show an loading image (like this) when the new products are being loaded. What code should I include in the below code to get this done?

function displayProducts(){     

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

推荐答案

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

I'm not sure what you're #product_show element is, but assuming it is some sort of container, you can just append that image to it (maybe absolutely positioned in the middle). and when it compeletes, remove the image.

类似于：

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

这篇关于想要显示“正在加载”页面加载期间的图像 - Javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！