思路：
1，引入jq的一个懒加载插件：jquery.lazyload.js
2，不要给图片设置src属性，设置data-original=”img/p1.jpg”
3，给图片加一个默认高度：height: 300px;
4，当图片进入视口，才会自动加载
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<style>
img{height: 300px;display: block;}
</style>
</head>
<body>
<img class="lazy" data-original="img/p1.jpg" alt="">
<img class="lazy" data-original="img/p2.jpg" alt="">
<img class="lazy" data-original="img/p3.jpg" alt="">
<img class="lazy" data-original="img/p4.jpg" alt="">
<script src="js/jquery-2.0.0.min.js"></script>
<script src="js/jquery.lazyload.js"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
$("img.lazy").lazyload({effect: "fadeIn"});
});
</script>
</body>
</html>
网友评论