懒加载图片案例

整体效果：

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'
				});

			});