显示“加载”，而新的图像加载

我显示“加载”，而新的图像加载

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

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

当我点击链接，我注入了新的src到.myImage。在新的src加载时可能会显示加载图片吗？

来源

2012-03-06 dynamic

可以使用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>

来源

2012-03-06 11:01:55 Candide

jusdt不要忘了，包括里面的一切$（文件）。就绪 – dynamic 2012-03-06 11:15:58

我编辑的代码。虽然列出的代码本身并不需要，但在这种情况下，$（document）.ready是一个适当的措施，尤其是在将脚本移动到其他位置时。 – Candide 2012-03-06 11:37:56

您需要在更改'src'属性之前添加'load'处理程序以使其可靠地工作。 – 2012-03-06 11:48:58

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

来源

2012-03-06 10:56:31

$(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/

来源

2012-03-06 10:57:36

完全同意，但没有明确的触发拨弄它没有触发 – 2012-03-06 11:17:54

是的，你应该使用图像预压

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;

来源

2012-03-06 10:59:41 devnull69

最简单的解决办法是将申报通过CSS加载img为background-image。

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

来源

2012-04-25 15:05:16 Raffael

显示“加载”，而新的图像加载

回答

相关问题