替换img src，但在下载图像时有加载图形显示

Question

我有一个页面可以交换一些相当大的图像。页面最初加载时要预加载的内容太多，因此这不是一个选项。所以我需要做的就是按照用户的请求加载它们。现在我正在使用 jQuery 来替换imgs src。这工作正常，但我正在加载的图像可能约为 500KB，而且看起来很糟糕，因为它们在下载时在屏幕上绘制。我想做的是在图像加载过程中在页面上弹出一个加载 gif，然后在图像加载后让加载 gif 消失。不过，我正在努力寻找一种方法来做到这一点。这是我的 JS/jQuery 代码，它只是替换了src.

var product = "bowl";
var image = "dog.jpg"; //this is actually pulled from a data attribute, but its just hardcoded here for an example

$("#images img[data-product="+product+"]").attr("src", "/img/tablesetting/"+image);

Answer 1

我做了一个工作 jsfiddle 来展示这个原理

http://jsfiddle.net/kasperfish/c72RT/4/

我最近需要做同样的事情。基本上我将图像包装在容器 div 中。在容器中，我添加了一个 span 元素，其中嵌入了我的 ajax 加载器 gif。该跨度最初必须隐藏，但在发出 ajax 请求时变得可见。当图像完全加载时，跨度将被删除。

在ajax调用之前

 $('#your_image_container').find('span').show();

论成功

 $('#your_image').attr('src', 'your/image/url').load(function() {

      $('#your_image_container').find('span').fadeOut(); 

  });

我做了一个 jsfiddle 来展示这个原理

http://jsfiddle.net/kasperfish/c72RT/4/