基于jQuery的图片加载loading效果插件

基于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();
   });

  });
 };

在此基础上还可以使用到其他比如轮播图片、延迟加载上。

查看DEMO

FROM: http://www.rockydo.com/articleDetail.php?id=52