js判断图片是否加载完成

判断图片加载完成在我们的前端切图项目中非常的有用,比如近期的一个项目中,比如loading,我需要loading的图片加载出来以后在显示loading(并非所有图片加载完),比如瀑布流,我需要文档流里面的所有图片加载完成以后在执行瀑布流,这样就不会有bug,等等。

它的意义在于可以更好的优化用户体验。

最简单暴力有效之方法

<script type="text/javascript">
$('img').onload = function() {
//code
}
</script>

最简单暴力有效之jquery方法
<script type="text/javascript">
$(function(){
$('.pic1').each(function() {
$(this).load(function(){
$(this).fadeIn();
});
});
})
</script>

注意,不要在$(document).ready()里绑定load事件。
还有一些更为复杂一点的方法,就不一一列举了,这两种是我们有在用的方法。
切版- 切图网(qietu.com)旗下psd转html,前端外包的“切图客”团体。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

客服咨询
客服1
客服2
微信公众号