使用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()方法来显示,类似的效果相信大家也见过。