基于jQuery的图片加载loading效果插件
图片loading的效果是网页中比较常见的,尤其是对大图片,loading效果让用户能够明白图片加载的过程。
实现思路也是比较简单的:
$.fn.LoadingImg = function() { return this.each(function() { var that = this; var src = $(this).attr("src2"); //获取当前的src2属性 var img = new Image(); //建立新图片 img.src = src; var loading = $("<img alt="加载中..." class="loadingImg" title="图片加载中..." src="loading.gif" />"); $(this).after(loading); //添加loading图片 $(this).hide(); //隐藏当前图片 $(img).load(function() { //当前图片下载完毕后 loading.remove(); $(that).attr("src", src); $(that).show(); }); }); };
在此基础上还可以使用到其他比如轮播图片、延迟加载上。