HTML/CSS
Zepto Lazy 实现CSS背景图像实现延迟加载jQuery插件
PetitQ
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/
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
