Question

我想更改图像的来源并在加载目标图像时显示“正在加载...”图像。我正在做以下事情：

$('#imageid').attr('src','loading.jpg');
$('#imageid').attr('src',path);

其中path是目标图像的路径。但是，JQuery会立即执行这两个操作，并且永远不会显示loading.jpg。使用常规Javascript时会发生同样的事情。

如何使第一行生效，以便在下一个图像加载时显示loading.jpg？

Answer 1

问题是，事实上，jQuery正在改变图像上的src，并且没有像上面那样完成任务的简单方法（如果你想要图像为loading，你将会需要具有src标记的img，但因此src也不能是loading.gif。但是，您可以通过一些Javascript和CSS实现此目的：

 $('#imageid').attr('src', path).addClass('loading').load(function() { $(this).removeClass('loading'); })

然后只需添加一个CSS样式，即当图像项附加loading类时，将加载图像放在图像项上。

 img.loading { 
   background: url("/loading.gif") no-repeat center center transparent;
 }

这样可以平滑地加载图像。值得注意的是，你也可以使用两个img标签并交换哪一个是可见的。另外，请小心load处理程序，因为缓存的图像会在某些浏览器中立即加载。享受！

Answer 2

由于您要一个接一个地替换图像src，因此可能在加载第一个图像之前不可见，下一个图像源请求发生。第一个图像完全加载后，您可以尝试设置下一个图像。这可以通过在图像load事件中设置下一个图像源来实现。试试这个

$('#imageid').load(function(){
   $(this).unbind('load')//We need to unbind the load event because load event will again get called next time when we set the source of this image

   $(this).attr('src',path);
}).attr('src','loading.jpg');

使用javascript / jquery更改img src

2 个答案: