css3 懒加载简易使用提升网页加载效率

最新推荐文章于 2024-03-18 04:34:35 发布

不畏明日不念旧夕

最新推荐文章于 2024-03-18 04:34:35 发布

阅读量327

点赞数 1

文章标签： html css3

本文链接：https://blog.csdn.net/m0_49208371/article/details/107233737

版权

本文介绍了如何利用CSS3实现网页图片的懒加载技术，通过这种方式可以显著提升网页加载效率。示例中展示了相关代码，并提示JS文件可以从CDN获取。

摘要由CSDN通过智能技术生成

效果图为

代码为：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>2020.07.09</title>
</head>
<style>
	body{
		margin: 0;
		background-color: #434343;
	}
	.wrap{
		overflow: hidden;
		width: 810px;
		background-color: #2D2D2D;
		margin: 50px auto;
	}
	.wrap img{
			display: block;
			border: 2px solid #4F4F4F;
			float: left;
			border-radius: 10px;  
			}	

</style>
<body>
<div class="wrap">
	<img src="images/1.jpg" height="181" width="198" alt="林允儿">
	<img src="images/2.jpg" height="181" width="198" alt="林允儿">
	<img src="images/3.jpg" height="181" widt

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

不畏明日不念旧夕

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3 懒加载简易使用提升网页加载效率

效果图为代码为：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>2020.07.09</title></head><style> body{ margin: 0; background-color: #434343; } .wrap{ overflow: hidden; widt
复制链接

扫一扫