jQuery插件Lazyload的占位图片

[izank]

<img data-original="./images/about/guanyufont.png" alt="" class="lazy loadimg" src="./zan/load/loadimg.gif">

在图片加载中 占位图片 显示的非常丑 比如淘宝的占位符加载图片 都是水平垂直居中的 而 jQuery插件Lazyload 占位图片是src 不好做显示位置 ，因为给图片 设定来宽和高 ， 后来想到 给图片加个背景图片 加来一个class 如下 class

.loadimg{
	background-image: url(../load/load.gif);
	background-repeat: no-repeat;
	background-position: center center;
}

这样式 在图片加载很慢的情况下 会出现一个加载图片的gif 动画 ；类似淘宝的加载过程中的动画 ，因为是背景图片就不受高和宽影响 都可以 垂直水平居中来 ，不知道这个方法 可以吗？

后来发现 在图片加载完后 背景的 加载动画的图片 还有 ！ 如果图片是透明的 就会显示 图片的背景图片！这样子好像做不是很合理！ 想问有什么好的解决方案吗？

能让 加载动画的占位图片 可以水平和 垂直居中！！

或者说 在图片加载完后 把

<img data-original="./images/about/guanyufont.png" alt="" class="lazy loadimg" src="./zan/load/loadimg.gif">

这个图片的 class loadimg 去掉 ！

$(function() {
      $("img.lazy").lazyload({

      	effect: "fadeIn",
      	removeClass:"loadimg "
      });
     
  });

可是好像不行 ，貌似 lazyload 没有 removeClass 这个！

lazyload 说是可以添加自定义事件 ，那么是否 在图片加载完后 添加一个 removeClass 的事件呢 ？

有人知道吗 ? 求大神指导啊

[步慢生错]

淘宝的宝贝描述内容图片有水平垂直居中？不就一个水平居中么，你想要什么效果啊。 另外加载前的图片占位符都是一样大小的啊，贴张适合的图上去不就行了，你难道要弄得每张长宽不同？ 插件基本都是开源的，怎么改都可以啊。 你想要加载完后执行函数一般他可能会有个钩子给你的吧，传入函数就行了。 在源码的 self.loaded = true; 之后加一句话 settings.loadedEvent() 在源码最开始的地方 var settings = { threshold : 0, failure_limit : 0, ... 加一句 ,loadedEvent:function(){} 注意逗号。源码就改造完成了。 然后html传入的参数中加一个选项 "loadedEvent":function(){..具体操作.removeClass(...)}

[izank]

$(function() {
      $("img.lazy").lazyload({

      	effect: "fadeIn",
      	loadedEvent:function(){
      		$(this).removeClass("loadimg");
      	}
      });
     });
  });

按照这样的方法 加载完图片后 没有执行 removeClass，是方法写的不对吗 ？

self.loaded = true;
				settings.loadedEvent();

在上面加：

var settings = {
            threshold       : 0,
            failure_limit   : 0,
            event           : "scroll",
            effect          : "show",
            container       : window,
            data_attribute  : "original",
            skip_invisible  : true,
            appear          : null,
            load            : null,
	    loadedEvent:function(){}
        };

没有执行 loadedEvent:function(){} 吗 ，哪里写错来吗 ？

[步慢生错]

$(this).removeClass("loadimg"); 这里this好像指代不明吧 插件里是用$self保存的你用 $self.removeClass("loadimg"); 或者直接写id名选择器

[zhishan202]

这两天遇到跟楼主一样的困惑，楼主之前是如何解决的？