• 欢迎访问ByWei.Cn,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站,加入百味博客 QQ群
  • 已升级为最新版主题,并将持续优化改造中,支持说说碎语功能,可像添加文章一样直接添加说说,博客主题升级啦
  • 感谢您百度求点赞啊!百度网址
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏百味博客吧
  • 博主热烈欢迎 软件定制开发 联系:http://www.bywei.cn

lazyload图片延迟加载

Web前端 bywei 6年前 (2013-04-08) 960次浏览 0个评论 扫描二维码

lazyload 图片延迟加载使图片在下拉滚动条时加载,一个很不错的用户体验,既减少了页面加载的时间了,也减轻了服务器的压力。

使用方法:

使用 JQuery 插件 ,插件名: jquery.lazyload(7kb 大小),压缩后(3kb 大小)。

1.直接导入 Jquery 插件
<script src=”jquery.js” type=”text/javascript”></script>
<script src=”jquery.lazyload.js” type=”text/javascript”></script>
2.在你的页面中加入如下的 javascript:

$(“img”).lazyload();

至此就将会使该网页的所有图片都延迟加载。

$("img").lazyload({
placeholder : "img/grey.gif",//通过设置占位符图片和自定事件来触发加载图片事件 
event : "click",
effect : "fadeIn" //图片显示效果 
 });

缺陷:
1.与 Ajax 技术的冲突;
2.图片的延迟加载,遇到高度特别高的图片,会出现停止加载的问题;
3.写代码不规范的同学要注意了,不管由于什么原因,如果您的页面中,img 标签的 height 属性未定义,那么我建议您最好不要使用 ImageLazyLoad

提示:可以直接使用淘宝的延迟加载技术。


百味博客 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:lazyload 图片延迟加载
喜欢 (0)
[微信扫一扫]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址