Zepto Lazy 实现 CSS 背景图像实现延迟加载 jQuery 插件，我们知道大部网站使用的图片延迟加载只对 img 标签中 src 属性的图片起作用，对 CSS 背景（background-image）中的图片无效，例如：
- <div class="lazy" style="background-image: url(54.jpg);"></div>
上面的写法一般应该用于响应式设计的缩略图。这篇文章介绍一款可以让 CSS 背景图片实现延迟加载的 jQuery 插件 Zepto Lazy。
基本使用方法：
- <script type="text/javascript" src="jquery.min.js"></script>
- <script type="text/javascript" src="jquery.lazy.min.js"></script>
- <div class="lazy" data-src="1.jpg"></div>
- <div class="lazy" data-src="2.jpg"></div>
- <div class="lazy" data-src="3.jpg"></div>
- <div class="lazy" data-src="4.jpg"></div>
- <div class="lazy" data-src="5.jpg"></div>
- <style>
- div.lazy {
- width: 700px;
- height: 467px;
- display: block;
- }
- </style>
- <script type="text/javascript">
- $(function() {
- $('.lazy').lazy();
- });
- </script>
只有滚动到距图片一定距离时才会以 CSS 背景 background-image 形式加载图片。更多设置参数查阅官网文档：http://jquery.eisbehr.de/lazy/
