html占位符懒加载,lazyload懒加载和swiper轮播懒加载的用法

对于有较多的图片的网页，使用图片延迟加载，能有效的提升页面加载速度，好比商城网页。html

lazyload使用方法：jquery

载入 JavaScript 文件：api

修改 HTML 代码中须要延迟加载的 IMG 标签：app

调用 Lazy Load：ide

$('img.lazy').lazyload();

参数参考网址：http://code.ciaoca.com/jquery/lazyload/spa

Lazy Load遇到的问题：当图片只指定width而没有设定height的时候，图片未加载时的占位是width=height的大小；插件

项目中遇到的问题，当页面中同时使用swiper插件作图片轮播的时候，就不能使用Lazy Load来处理轮播的图片，这时就须要使用swiper的延迟加载参数-lazyLoading：true;code

具体使用方法：(http://www.swiper.com.cn/api/Images/2015/0308/213.html)htm

设为true开启图片延迟加载，使preloadImages无效。

须要将图片img标签的src改写成data-src，而且增长类名swiper-lazy。

背景图的延迟加载则增长属性data-background(3.0.7开始启用)。blog