简单示例：图片懒加载
2018-08-18 本文已影响0人
初入前端的小菜鸟
一、什么是图片滚动加载？
通俗的讲就是：当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为 X*Xpx 图片的路径（这样就只需请求一次），只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。这就是图片懒加载
二、为什要使用这个技术？
比如一个页面中有很多图片，如淘宝、京东首页等等，如果一上来就发送这么多请求，页面加载就会很漫长，如果js文件都放在了文档的底部，恰巧页面的头部又依赖这个js文件，那就不好办了。更为要命的是：一上来就发送百八十个请求，服务器可能就吃不消了（又不是只有一两个人在访问这个页面）。
因此优点就很明显了：不仅可以减轻服务器的压力，而且可以让加载好的页面更快地呈现在用户面前（用户体验好）
三、怎么实现？
1. 实现思路
- 设置img元素的src属性为空(没有图片就不会显示喽)，将真实的图片地址设置在data-src中(这个属性名根据自己设置)
- 对img元素的位置进行判断，如果出现在浏览器页面中或者自己设置的容器中，通过js来控制img中data-src将其图片地址添加到img的src中，让图片进行显示
2. 对元素的位置进行判断
image
-
1.窗口的的位置：
$(window).height() -
2.页面滚动的距离：
$(window).scrollTop() -
3.页面中内容的位置:
offset().top当 1+ 2 > 3 的话内容出现在页面中
小示例:
<!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>Document</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div class="container">
<img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="1" data-src="http://cdn.jirengu.com/book.jirengu.com/img/1.jpg">
<img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="2" data-src="http://cdn.jirengu.com/book.jirengu.com/img/2.jpg">
<img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="3" data-src="http://cdn.jirengu.com/book.jirengu.com/img/3.jpg">
<img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="4" data-src="http://cdn.jirengu.com/book.jirengu.com/img/4.jpg">
<img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="5" data-src="http://cdn.jirengu.com/book.jirengu.com/img/5.jpg">
<img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="6" data-src="http://cdn.jirengu.com/book.jirengu.com/img/6.jpg">
<img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="7" data-src="http://cdn.jirengu.com/book.jirengu.com/img/7.jpg">
<img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="8" data-src="http://cdn.jirengu.com/book.jirengu.com/img/8.jpg">
<img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="9" data-src="http://cdn.jirengu.com/book.jirengu.com/img/9.jpg">
<h2>测试</h2>
<img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="10" data-src="http://cdn.jirengu.com/book.jirengu.com/img/10.jpg">
<img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="11" data-src="http://cdn.jirengu.com/book.jirengu.com/img/11.jpg">
<img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="12" data-src="http://cdn.jirengu.com/book.jirengu.com/img/12.jpg">
<img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="13" data-src="http://cdn.jirengu.com/book.jirengu.com/img/13.jpg">
<img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="14" data-src="http://cdn.jirengu.com/book.jirengu.com/img/14.jpg">
<img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="15" data-src="http://cdn.jirengu.com/book.jirengu.com/img/15.jpg">
<img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="16" data-src="http://cdn.jirengu.com/book.jirengu.com/img/16.jpg">
<img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="17" data-src="http://cdn.jirengu.com/book.jirengu.com/img/17.jpg">
<img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="18" data-src="http://cdn.jirengu.com/book.jirengu.com/img/18.jpg">
<img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="19" data-src="http://cdn.jirengu.com/book.jirengu.com/img/19.jpg">
<img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="20" data-src="http://cdn.jirengu.com/book.jirengu.com/img/20.jpg">
</div>
<script>
start() //调用保证进入页面首页图片是可见的
$(window).on('scroll',function() {
start() //页面滚动进行调用
})// 页面滚动
function start() {
$('.container img').not('[data-isLoaded]').each(function() {//遍例img
//not 排除已经加载完成的图片
var $node = $(this)
if(isShow($node)) {
setTimeout(function() {
loadImg($node)
}, 500)
}
})
}
function isShow($node) {
return $node.offset().top <= $(window).height() + $(window).scrollTop()
} //判断图片位置
function loadImg($img) {
$img.attr('src',$img.attr('data-src'))
$img.attr('data-isLoaded',1) //对已经加载出来的图片添加属性
}//进行图片加载
</script>
</body>
</html>
