jQuery插件Lazyload的占位图片

izank 2014-08-10 11:54:28
<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 的事件呢 ?

有人知道吗 ? 求大神指导啊
...全文
379 4 打赏 收藏 转发到动态 举报
写回复
用AI写文章
4 条回复
切换为时间正序
请发表友善的回复…
发表回复
zhishan202 2015-06-10
  • 打赏
  • 举报
回复
这两天遇到跟楼主一样的困惑,楼主之前是如何解决的?
步慢生错 2014-08-11
  • 打赏
  • 举报
回复
$(this).removeClass("loadimg"); 这里this好像指代不明吧 插件里是用$self保存的你用 $self.removeClass("loadimg"); 或者直接写id名选择器
izank 2014-08-10
  • 打赏
  • 举报
回复
$(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(){} 吗 ,哪里写错来吗 ?
步慢生错 2014-08-10
  • 打赏
  • 举报
回复
淘宝的宝贝描述内容图片有水平垂直居中?不就一个水平居中么,你想要什么效果啊。 另外加载前的图片占位符都是一样大小的啊,贴张适合的图上去不就行了,你难道要弄得每张长宽不同? 插件基本都是开源的,怎么改都可以啊。 你想要加载完后执行函数一般他可能会有个钩子给你的吧,传入函数就行了。 在源码的 self.loaded = true; 之后加一句话 settings.loadedEvent() 在源码最开始的地方 var settings = { threshold : 0, failure_limit : 0, ... 加一句 ,loadedEvent:function(){} 注意逗号。源码就改造完成了。 然后html传入的参数中加一个选项 "loadedEvent":function(){..具体操作.removeClass(...)}
什么是ImageLazyLoad技术 在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的交互。尤其是对于高清晰的图片,占的几M的空间。ImageLazyLoad技术就是,当前可见界面的图片是加载进来的,而不可见页面(通过滚动条下拉可见)中的图片是不加载的,这样势必会引起速度上质的提升。 怎么实现ImageLazyLoad 一、使用JQuery插件插件名: jquery.lazyload(7kb大小),压缩后(3kb大小) 在线压缩js http://closure-compiler.appspot.com/home 虽然是很牛X的特效,不过用JQuery插件只需要短短几句代码,使用过程如下: 1.导入JS插件 <script src="jquery.js" type="text/javascript">lazyload(); 这将会使所有的图片都延迟加载。 当然插件还有几个配置项可供设置。 1.改变threshold $(“img”).lazyload({ threshold : 200 }); 把阀值设置成200 意思就是当图片没有看到之前先load 200像素。 2.当然了你也可以通过设置占位图片和自定事件来触发加载图片事件 $("img").lazyload({ placeholder : "img/grey.gif", event : "click" }); 3.可以通过定义effect 参数来定义一些图片显示效果 $("img").lazyload({ placeholder : "img/grey.gif", effect : "fadeIn" }); LazyLoad(延迟加载)技术不仅仅用在对网页中图片的延迟加载,对数据同样可以,Google Reader和Bing图片搜索就把 LazyLoad技术运用的淋漓尽致; 缺陷: 1.与Ajax技术的冲突; 2.图片的延迟加载,遇到高度特别高的图片,会出现停止加载的问题; 3.写代码不规范的同学要注意了,不管由于什么原因,如果您的页面中,img标签的height属性未定义,那么我建议您最好不要使用ImageLazyLoad

87,901

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧