jQuery技术

jQuery加载图片

字号+ 作者:H5之家 来源:H5之家 2016-05-22 11:05 我要评论( )

使用jQuery加载图片时,当图片正在加载时显示一个小动画图片让用户知道此时正在进行什么响应。这样提高了用户体验,也丰富了网页效果。下边我们就看看用jQuery实

使用jQuery加载图片时,当图片正在加载时显示一个小动画图片让用户知道此时正在进行什么响应。这样提高了用户体验,也丰富了网页效果。下边我们就看看用jQuery实现图片加载特效。

首先看看显示我们图片的div标记:

<div id="load" class="loading"></div>

接下来,我们直接看看jQuery加载图片时的处理代码,在关键地方都做了注释,相信大家都能很容易的理解。

$(document).ready(function() { var img = new Image(); //图片加载加载后执行 $(img).load(function() { //图片默认隐藏 $(this).hide(); //移除小动画 $(".loading").removeClass("loading").append(this); //使用fadeIn特效 $(this).fadeIn("slow"); }) .error(function() { //加载失败时的处理 }) //最后设置src .attr("src", "images/name.jpg"); });

到这里就实现了jQuery加载图片时的效果,大家可以扩展这种方法来加载多个图片。如显示评论用户头像时用fadeIn()方法来显示,类似的效果相信大家也见过。

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 屌爆了 7 款绚丽的 HTML5/jQuery 图片特效

    屌爆了 7 款绚丽的 HTML5/jQuery 图片特效

    2015-11-20 17:40

  • jquery实现图片左右晃动(震动)

    jquery实现图片左右晃动(震动)

    2015-11-13 11:10

网友点评