大部网站使用的图片延迟加载只对img标签中src属性的图片起作用，对CSS背景（background-image）中的图片无效，例如：
<div class="lazy" style="background-image: url(54.jpg);"></div>
上面的写法一般应该用于响应式设计的缩略图。这篇文章介绍一款可以让CSS背景图片实现延迟加载的jQuery插件 Zepto Lazy。
基本使用方法：
- 加载jquery和jquery.lazy
- <script type="text/javascript" src="jquery.min.js"></script>
- <script type="text/javascript" src="jquery.lazy.min.js"></script>
- HTML
- <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>
- CSS
- div.lazy {
- width: 700px;
- height: 467px;
- display: block;
- }
- JavaScript
- $(function() {
- $('.lazy').lazy();
- });
- 我的微信
- 有问题可随时与我联系
-
- 微信小程序
- 随时随地查看文章
-
