-
bLazy 是一个不依赖于第三方JS库(如 jQuery)的lazyLoad脚本,压缩版只有几Kb,它可以让你减轻您服务器的负载和加快图像的载入,这样可以节省带宽和服务器的请求,用户将拥有更快的加载时间和浏览体验,而且支持根据不同的设备宽度显示不同大小的图片,这个功能对于响应式开发非常有用,也是尘的心推荐的主要原因。而且更加值得点赞的是这么好的脚本,支持所有主流的浏览器,包括已经落伍的IE7+。
下面的样例代码的功能就是,当设备宽度小于 420px 的时候,就加载小图片,否则加载大图片,同时,图片加载后移除加载器。
HTML:
<img class="b-lazy" src="placeholder-image.jpg" data-src="image.jpg" data-src-small="small-image.jpg" alt="Image description" />
JavaScript:
var bLazy = new Blazy({ breakpoints: [{ width: 420 // Max-width , src: 'data-src-small' }] , success: function(element){ setTimeout(function(){ // We want to remove the loader gif now. // First we find the parent container // then we remove the "loading" class which holds the loader image var parent = element.parentNode; parent.className = parent.className.replace(/\bloading\b/,''); }, 200); } });
实际的演示效果请访问:http://dinbror.dk/blazy/
bLazy 下载及详细参数使用说明,请访问:http://dinbror.dk/blog/blazy/
GitHub地址:https://github.com/dinbror/blazy/
轻量级支持响应式图片的lazyLoad脚本
1703人参与 |分类: 站长百科|时间: 2016年03月14日
相关文章
- 2020-01-10作为站长应该懂得的7大搜索引擎站长平台
- 2019-10-22个人博客网站用什么程序比较好?
- 2019-10-12头条搜索站长平台如何添加网站和sitemap文件?附图文教程
- 2019-09-26PHP环境下是选择Apache和Nginx?
- 2019-09-11网站运维人员必做的7项网站维护工作
- 2019-08-26现在还要必要坚持做PC网站或个人博客吗?
- 2019-08-03宝塔面板+云锁nginx自编译web防护的图文教程
- 2019-07-08解决国内主机服务器 WordPress 后台异常卡顿的问题
- 2019-07-02网站启用SSL自动301跳转到HTTPS教程
- 2019-06-06宝塔/BT面板内存占用MySQL频繁崩溃自动重启方法
评论专区德信商城