大部网站使用的图片延迟加载只对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>
div.lazy { width: 700px; height: 467px; display: block; }
$(function() { $('.lazy').lazy(); });
例如下面的图片,只有滚动到距图片一定距离时才会以CSS背景background-image形式加载图片
原代码
<div class="lazy"><a style="width: 700px;height: 467px;display: block;background-repeat: no-repeat;background-position: center;background-size: cover;" href="#" data-src="https://wx1.sbimg.cn/2020/08/10/owEWa.jpg"></a></div>
更多设置参数查阅官网文档:http://jquery.eisbehr.de/lazy/

版权声明
本站原创文章转载请注明文章出处
评论