懒加载图片案例

整体效果:懒加载图片案例_第1张图片

HTML部分:

1.jpg 2.jpg 3.jpg 4.jpg 5.jpg
.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'
				});

			});

你可能感兴趣的:(前端,java,javascript)