jQuery实现图片懒加载
Posted a-pupil
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery实现图片懒加载相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jquery 实现懒加载</title>
<style>
ul,
li {
list-style: none;
}
.container {
width: 800px;
margin: 0 auto;
}
.container li {
float: left;
margin: 10px 10px;
}
.container li img {
width: 340px;
height: 260px;
}
</style>
</head>
<body>
<ul class="container">
<li>
<a href="#">
<img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/1.jpg" />
</a>
</li>
<li>
<a href="#">
<img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/2.jpg" />
</a>
</li>
<li>
<a href="#">
<img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/3.jpg" />
</a>
</li>
<li>
<a href="#">
<img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/4.jpg" />
</a>
</li>
<li>
<a href="#">
<img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/5.jpg" />
</a>
</li>
<li>
<a href="#">
<img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/6.jpg" />
</a>
</li>
<li>
<a href="#">
<img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/7.jpg" />
</a>
</li>
<li>
<a href="#">
<img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/8.jpg" />
</a>
</li>
<li>
<a href="#">
<img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/9.jpg" />
</a>
</li>
<li>
<a href="#">
<img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/10.jpg" />
</a>
</li>
<li>
<a href="#">
<img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/11.jpg" />
</a>
</li>
<li>
<a href="#">
<img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/12.jpg" />
</a>
</li>
<li>
<a href="#">
<img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/13.jpg" />
</a>
</li>
<li>
<a href="#">
<img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/14.jpg" />
</a>
</li>
<li>
<a href="#">
<img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/15.jpg" />
</a>
</li>
<li>
<a href="#">
<img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/16.jpg" />
</a>
</li>
</ul>
</body>
//引入jquery
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script>
//监听文档是否有触发滚动事件
$(document).on('scroll', function () {
$(".container img").each(function () {
// 判断是否是在可视区域内 并且 判断lodingimg($(this))是否有加载过 如果加载过就不执行此步骤 要不就会再次执行
if (showhide($(this)) && !lodingimg($(this))) {
voluation($(this)) //把自定义的 data-src 赋值给img中的src属性
}
})
})
// 判断图片是否需要加的必要条件
function showhide(img) {
var scrolltop = $(document).scrollTop() //获取浏览器卷去的部分
var browser = document.documentElement.clientHeight; //获取浏览器中的可视区域
var offsettop = img.offset().top; //获取图片距离顶部的距离
var imgheight = img.height() //获取图片元素的高度
// 从上往下加载图片 判断 如果图片的距离 > 浏览器卷去的部分 && 图片距离 < 卷去的部分 + 浏览器的可视区域
// 从下往上加载图片 或者 图片距离 < 卷去的部分 && 图片距离 > 卷去的高度 - 图片自身的高度（边界条件）
if (offsettop > scrolltop && offsettop < (scrolltop + browser) || offsettop < scrolltop && offsettop > (scrolltop - imgheight)) {
return true
}
return false
}
// 把自定义的 data-src 赋值给img中的src属性
function voluation(img) {
return img.attr('src', img.attr('data-src'))
}
// 用于判断是否有加载
function lodingimg(img) {
return img.attr('data-src') === img.attr('src')
}
// 首次渲染 如果不提前执行一次页面图片显示空白 必须滚动才能够加载
$(".container img").each(function () {
onecarry($(this))
})
// 首次执行此函数
function onecarry(img) {
var scrolltop = $(document).scrollTop()
var browser = document.documentElement.clientHeight; //获取浏览器中的可视区域
var offsettop = img.offset().top;
var imgheight = img.height()
if (offsettop > scrolltop && offsettop < (scrolltop + browser) || offsettop < scrolltop && offsettop > (scrolltop - imgheight)) {
voluation(img)
}
}
</script>
</html>以上是关于jQuery实现图片懒加载的主要内容，如果未能解决你的问题，请参考以下文章