Question

我正在使用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>

问题是，如果图像的加载时间超过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>

Answer 1

每当src属性发生变化并且图像完成加载

时，onload事件就会触发

编辑代码示例：

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

虽然我会说这种呈现装载程序图像的方法有点不寻常。

Answer 2

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

http://engineeredweb.com/blog/09/12/preloading-images-jquery-and-javascript

确定是否加载了更改的图像

2 个答案: