Jquery如何在更改和加载图像src后引起操作

Question

所以我有一个脚本可以在点击缩略图时更改主图像src。这一切都很好，除了偶尔单击图像时不会立即加载图像。

基本上我如何知道从src更改加载新图像的时间。

以下是我更改源代码的代码行：

$thumbnail_image_src = $(this).find('.thumbnail-image').attr("data-full");

Answer 1

将处理程序绑定到img标记的'load'事件（this JSFiddle）

 $(this).find('.thumbnail-image').each(function() {
   $(this).load(function() {
     alert('image has changed and loaded');
   })
   .error(function() {
     alert('image has failed to load');
   }).attr('src', $(this).attr('data-full'));
 });

这些功能将在适当的事件中触发。享受！

Answer 2

img标记包含load和error事件，可用于检测图像是否已加载。

$("img").load(function(){
  //Image loaded
}).error(function(){
  //Image load failed
}).attr("src", $thumbnail_image_src);