懒加载或者按需加载,是一种很好的优化网页或应用的方式。这种方式实际上是先把你的代码在一些逻辑断点处分离开,然后在一些代码块中完成某些操作后,立即引用或即将引用另外一些新的代码块。这样加快了应用的初始加载速度,减轻了它的总体体积,因为某些代码块可能永远不会被加载。
我们之前看到的懒加载一般是这样的形式:
- . 浏览一个网页,准备往下拖动滚动条
- . 拖动一个占位图片到视窗
- . 占位图片被瞬间替换成最终的图片
我们可以在示例中看到懒加载是如何使用的,网页首先用一张轻量级的图片占位,当占位图片被拖动到视窗,瞬间加载目标图片,然后替换占位图片。
下图所示 :
黑色的 是占位图片
当用户滚动时 将隐藏的图片显示出来(已经进行了优化 当用户打开网页时 会显示一部分图片)先调用一次 start ()
增强用户体验
image.png
当一个元素出现在我们眼前 小于 窗口高度 加上窗口滚动的高度的时候 就意味着 到达目标点 可以开始加载图片 或者其他内容
对返回结果进行判断 结果为true
时 开始执行加载任务 start ()
function isShow($node){
return $node.offset().top <= $(window).height() + $(window).scrollTop()
}
完整代码如下:
<!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">
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<title>图片懒加载</title>
</head>
<style>
.container{
max-width: 800px;
margin: 0 auto;
}
.container::after {
content: '';
display: block;
clear: both;
}
.container img{
float: left;
width: 50%;
}
/* 目标元素 */
h1 {
clear: both;
}
</style>
<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/15.jpg">
<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/16.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/17.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/18.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/17.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/18.jpg">
<!-- <h1 id="target">hello</h1> -->
<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="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">
</div>
<script>
//滚动事件
start () //打开页面 调用一次
$(window).on('scroll',function(){
start () //滚动页面是 调用一次 方便管理
})
//加载函数
function start (){
$('.container img').not('[data-isLoaded]').each(function(){
var $node = $(this)
if( isShow( $node) ){
//缓冲效果
setTimeout(function(){
loadIng( $node)
},500)
}
})
}
// 页面逻辑
function isShow($node){
// 当一个元素出现在我们眼前 小于 窗口高度 加上窗口滚动的高度的时候 就意味着 到达目标点
// 可以开始加载图片 或者其他内容
return $node.offset().top <= $(window).height() + $(window).scrollTop()
}
// 显示状态
function loadIng($img){
// 获取目标元素 并替换
$img.attr('src', $img.attr('data-src'))
//性能优化 进行判断 已经加载的 不会再进行加载
$img.attr('data-isLoaded', 1)
}
</script>
</body>
</html>
该示例 用jQuery 实现 ,对代码进行最大优化
//性能优化 进行判断 已经加载的 不会再进行重复加载
$img.attr('data-isLoaded', 1)