懒加载
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title></title>
<style media="screen">
* {
margin: 0;
padding: 0;
}
.container {
width: 60%;
margin: 0 auto;
border: 1px solid blue;
overflow: hidden;
}
.container section {
float: left;
width: 48%;
margin: 20px 1%;
text-align: center;
background-color: rgb(210, 227, 209);
border-radius: 5px;
overflow: hidden;
}
.container section img {
width: 100%;
height: 170px;
}
.container section p {
padding: 10px 0;
}
</style>
</head>
<body>
<div class="container"></div>
</body>
<script src="./js/jquery-2.2.3.js" charset="utf-8"></script>
<script src="./js/jquery.lazyload.js" charset="utf-8"></script>
<script type="text/javascript">
$(function () {
$.get('http://localhost:8888/data/data1.json', function (data) {
data = data.scenery;
$.each(data, function (i, item) {
$(`<section>
<img src="" data-original="${item.img_url}" alt="" />
<p>${item.title}</p>
</section>`).appendTo('.container');
});
// 图片进行懒加载
// 需要给图片设置高度
$('img').lazyload({
effect: "fadeIn"
}).lazyload({threshold:300});
});
//懒加载 lazyload 懒加载 threshold effect加载 jq中有懒加载ku lazyload effect加载方式 threshold 距离多少家在
});
</script>
</html>
