CSS背景图像实现延迟加载的jQuery插件:Zepto Lazy

知更鸟
知更鸟
知更鸟
1589
文章
6931
评论
2020年8月10日11:41:26 评论 196

大部网站使用的图片延迟加载只对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/

weinxin
版权声明
本站原创文章转载请注明文章出处
HTML5视频自动循环播放 Web前端

HTML5视频自动循环播放

如果需要在网页中添加视频,可以参考下面的代码,支持MP4视频自动循环播放。 代码一,纯HTML5视频自动循环播放 <!DOCTYPE HTML> <html> <body...
HTTPS与HTTP相比更安全 Web前端

HTTPS与HTTP相比更安全

近几年,互联网发生着翻天覆地的变化,尤其是我们一直习以为常的HTTP协议,在逐渐的被HTTPS协议所取代,在浏览器、搜索引擎、CA机构、大型互联网企业的共同促进下,互联网迎来了“HTTPS加密时代”,...
jQuery各版本下载大全 Web前端

jQuery各版本下载大全

jquery-2.0以上版本不再支持IE 6/7/8, 并不是最新的版本就最好的,而是根据您项目需求所适合的版本! 百度引用地址 (推荐目前最稳定的,不会出现延时打不开情况) jquery-3.4.1...
最佳 CSS 框架 Web前端

最佳 CSS 框架

在构建网站时,使用 CSS 框架是一个实时的节省,因为它为您提供了每个网页设计师和前端开发人员在制作网站时需要的工具。 CSS 框架是一个软件框架,它允许使用 HTML/CSS 进行更简单、更符合标准...
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: