<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
<title>图片懒加载实现</title>
<script src="jquery-1.10.2.min.js"></script>
<style type="text/css">
*{list-style: none;margin: 0;padding: 0;}
.container{ 240px;margin: 0 auto;}
.container li img{
240px;
height: 180px;
}
</style>
</head>
<body>
<ul class="container">
<li><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/12.jpg" alt=""></li>
<li><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/12.jpg" alt=""></li>
<li><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/12.jpg" alt=""></li>
<li><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/12.jpg" alt=""></li>
<li><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/12.jpg" alt=""></li>
<li><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/12.jpg" alt=""></li>
<li><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/12.jpg" alt=""></li>
<li><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/12.jpg" alt=""></li>
<li><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/12.jpg" alt=""></li>
<li><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/12.jpg" alt=""></li>
<li><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/12.jpg" alt=""></li>
<li><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/12.jpg" alt=""></li>
<li><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/12.jpg" alt=""></li>
<li><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/12.jpg" alt=""></li>
<li><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/12.jpg" alt=""></li>
</ul>
</body>
<script>
(function(){
var head=document.head;
var width=document.documentElement.clientWidth;
var styleN=document.createElement('style');
styleN.innerHTML='html{font-size:'+width/16+'px !important;}';
head.appendChild(styleN);
})();
</script>
<script>
// 先进行一次检查
lazyLoad()
$(window).on('scroll',function () {//当页面滚动的时候绑定事件
lazyLoad();
})
function lazyLoad() {
$('.container img').each(function () {//遍历所有的img标签
if (checkShow($(this)) && !isLoaded($(this)) ){
// 需要写一个checkShow函数来判断当前img是否已经出现在了视野中
//还需要写一个isLoaded函数判断当前img是否已经被加载过了
loadImg($(this));//符合上述条件之后，再写一个加载函数加载当前img
}
})
}
function checkShow($img) { // 传入一个img的jq对象
var scrollTop = $(window).scrollTop(); //即页面向上滚动的距离
var windowHeight = $(window).height(); // 浏览器自身的高度
var offsetTop = $img.offset().top; //目标标签img相对于document顶部的位置
if (offsetTop < (scrollTop + windowHeight) && offsetTop > scrollTop) { //在2个临界状态之间的就为出现在视野中的
return true;
}
return false;
}
function isLoaded ($img) {
return $img.attr('data-src') === $img.attr('src'); //如果data-src和src相等那么就是已经加载过了
}
function loadImg ($img) {
$img.attr('src',$img.attr('data-src')); // 加载就是把自定义属性中存放的真实的src地址赋给src属性
}
</script>
</html>