Question

我有

<img src="..." class="myImage">
<a href="..." class="changeImage">

$(function(){
   $('a.changeImage').click(function(){
       $('img.myImage').attr('src',NEWVALUE);
   });
});

当我点击链接时，我会向.myImage注入一个新的src。在新的src加载时是否可以显示加载图像？

Answer 1

是的，您应该使用图像预加载

var newImage = new Image();
var loadingSrc = 'loading.gif';
$('img.myImage').attr('src', loadingSrc);
newImage.onload = function() {
    $('img.myImage').attr('src', newImage.src);
};
newImage.src = NEWVALUE;

Answer 2

$(function(){
   $('a.changeImage').click(function(e){
       e.preventDefault();
       //show the loading div
       $('img.myImage').attr('src',NEWVALUE);
       $("img").trigger("onload");
   });

$("img").bind("onload",function(){

 //remove the loading div
});
});

http://jsfiddle.net/PrXSW/9/

Answer 3

看看jquery.blockui插件。它可能适合您的需要。

Answer 4

您可以使用load event（未经测试的代码）

<img src="smallLoader.png" alt="loading" id="loading" />
<img alt="bigImage" id="bigImage" style="display:none" />

<script type="text/javascript">
$(document).ready(function() {

    $('#bigImage').load(function() {
        $('#loading').hide();
        $('#bigImage').show();
    });

    $('#bigImage').attr("src", "bigimage.png");
});
</script>

Answer 5

最简单的解决方案是通过CSS将加载img声明为background-image。

#loaded-image {
    /* shows loading icon until picture is fully loaded */
    background-image: url(loading.gif);
    background-repeat: no-repeat;
}

显示＆＃34; loading＆＃34;正在加载新图像

5 个答案: