Javascript 确定是否加载已更改的图像

我正在使用jQuery创建一个小图库，并停留在一个小问题上

是这样的：

<script type="text/javascript">
$(document).ready(function(){
$('#thumb1').click(function(){
          $('#fullimage').attr('src','loading.gif').fadeOut(800,function(){
            $(this).attr('src','newimage.jpg').bind('onreadystatechange load', function(){
            $(this).fadeIn(300);       
            });

          });          
       });
//same code for $('#thumb2') etc.
});
</script>
<img src="defaultimage.jpg" id="fullimage" /><br />
<a><img id="thumb1" src="notimportantthumb.jpg"></a>
<a><img id="thumb2" src="notimportantthumb2.jpg"></a>

$（文档）.ready（函数（）{
$（'#thumb1'）。单击（函数（）{
$（'#fullimage'）.attr（'src'，'loading.gif'）.fadeOut（800，function（）{
$（this.attr（'src'，'newimage.jpg'）.bind（'onreadystatechange load'，function（）{
美元（本）.fadeIn（300）；
});
});          
});
//美元（“#拇指2”）等的代码相同。
});

问题是，如果加载图像的时间超过800毫秒，它将无法工作

我知道我必须使用jQuery的load（）或类似函数，但我无法将其组合在一起。如何识别是否加载了使用jQuery更改的图像？ 谢谢

编辑：通过添加第二个隐藏图像作为加载程序解决。如果有人感兴趣：

<script type="text/javascript">
    $(document).ready(function(){
    $('#thumb1').click(function(){
        if ($('#fullimage').attr('src')!='newimage.jpg') { //it would not load, just show the loading.gif

            $('#fullimage').hide(); $('#hiddenloader').show();
              $('#fullimage').attr('src','newimage.jpg').load(function(){
                $('#hiddenloader').fadeOut(300,function(){
                    $('#fullimage').fadeIn(300);
                });

                });

          }
    });
//same code for $('#thumb2') etc.
});
</script>
<img src="defaultimage.jpg" id="fullimage" /><br />
<img src="loading.gif" id="hiddenloader" style="display: none;" />
<a><img id="thumb1" src="notimportantthumb.jpg" /></a>
<a><img id="thumb2" src="notimportantthumb2.jpg" /></a>

$（文档）.ready（函数（）{
$（'#thumb1'）。单击（函数（）{
如果（$（'#fullimage'）.attr（'src'）！='newimage.jpg'）{//它不会加载，只显示loading.gif
$（'fullimage'）.hide（）；$（'hiddenloader'）.show（）；
$（'#fullimage'）.attr（'src'，'newimage.jpg'）.load（函数（）{
$（'hiddenloader'）.fadeOut（300，function（）{
$（'fullimage'）.fadeIn（300）；
});
});
}
});
//美元（“#拇指2”）等的代码相同。
});

每当src属性更改且图像完成加载时，onload事件都应触发

编辑代码示例：

$('#thumb1').click(function(){
    $('#fullimage').attr('src','loading.gif').fadeOut(800,function(){
            $(this).attr('src','newimage.jpg').load(function(){
            $(this).fadeIn(300);       
        });
    });          
});

---

尽管我会说，这种呈现加载程序映像的方法有点不寻常。

每当src属性更改并且映像完成加载时，onload事件都会触发

编辑代码示例：

$('#thumb1').click(function(){
    $('#fullimage').attr('src','loading.gif').fadeOut(800,function(){
            $(this).attr('src','newimage.jpg').load(function(){
            $(this).fadeIn(300);       
        });
    });          
});

---

尽管我会说这种呈现加载程序映像的方法有点不寻常。

您可以在加载时预加载映像吗

---

您可以在加载时预加载图像吗

---

你为什么给它加载.gif，然后淡出它？在淡出之前，您不会将

newimage.jpg

分配给src，那么800ms与此有什么关系？如果单击缩略图更改器图像，我想立即将源更改为loading.gif，然后如果要更改的图像已加载，我想淡出，更改源，然后淡出。800毫秒是由我组成的（就像一个平均的图像加载时间），只需在这里发布并解释我所处的位置。是的，但现在的方式是，你给它

load.gif

，然后你立即淡出它，然后淡出完成后，你分配

newimage.jpg

。因此，新图像只有在加载的图像消失后才会开始加载。为什么要先给它

loading.gif

，然后将其淡出？在淡出之前，您不会将

newimage.jpg

分配给src，那么800ms与此有什么关系？如果单击缩略图更改器图像，我想立即将源更改为loading.gif，然后如果要更改的图像已加载，我想淡出，更改源，然后淡出。800毫秒是由我组成的（就像一个平均的图像加载时间），只需在这里发布并解释我所处的位置。是的，但现在的方式是，你给它

load.gif

，然后你立即淡出它，然后淡出完成后，你分配

newimage.jpg

。因此，新图像在加载图像消失之前不会开始加载。我也这么认为，但悲伤地预加载不是一个选项。我也这么认为，但悲伤地预加载不是一个选项。编辑答案以包含示例代码。正如您所看到的，您已经非常接近了。老实说，我看不出您的代码和我的代码有什么区别，只是我绑定了ReadyStateChange和load。我需要的不是在800毫秒内淡出，然后更改img src，而是在加载图像后更改。标记为已接受，因为您的注释鼓励了我一个技巧，它可以完美地工作（添加到顶部），谢谢！呵呵，我是一个好男人。我想到了这个解决方案，并试图用jQuery编写它。。。惨淡！我不想给你一个mootools或香草解决方案，因为你在jQuery中。很高兴你成功了！编辑答案以包含示例代码。正如您所看到的，您已经非常接近了。老实说，我看不出您的代码和我的代码有什么区别，只是我绑定了ReadyStateChange和load。我需要的不是在800毫秒内淡出，然后更改img src，而是在加载图像后更改。标记为已接受，因为您的注释鼓励了我一个技巧，它可以完美地工作（添加到顶部），谢谢！呵呵，我是一个好男人。我想到了这个解决方案，并试图用jQuery编写它。。。惨淡！我不想给你一个mootools或香草解决方案，因为你在jQuery中。很高兴你成功了！