懒加载图片案例

2023-12-24 08:40:25

整体效果：

HTML部分：

<div class="lazy-box">
			<img class="lazy" data-original="img/1.jpg" alt="1.jpg" width="960" height="540">
			<img class="lazy" data-original="img/2.jpg" alt="2.jpg" width="960" height="540">
			<img class="lazy" data-original="img/3.jpg" alt="3.jpg" width="960" height="540">
			<img class="lazy" data-original="img/4.jpg" alt="4.jpg" width="960" height="540">
			<img class="lazy" data-original="img/5.jpg" alt="5.jpg" width="960" height="540">
		</div>

.lazy-box {
				margin: 0px auto;
				padding: 0px;
				width: 960px;
				height: auto;
			}
			
			.lazy-box>img {
				outline: none;
				margin: 25px auto;
				padding: 0px;
				border: 1px solid #E0E0E0;
				background-color: #F0F0F0;
			}

JS部分：

$(document).ready(function() {

				$("div.lazy-box>img.lazy").lazyload({
					effect: 'fadeIn',
					placeholder: 'img/loading.jpg'
				});

			});

文章来源:https://blog.csdn.net/geng1025/article/details/135178175
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。