图片懒加载 优化页面性能
2019-06-20 本文已影响0人
stringtoString
什么是懒加载
懒加载其实就是延迟加载，是一种对网页性能优化的方式，比如当访问一个页面的时候，优先显示可视区域的图片而不一次性加载所有图片，当需要显示的时候再发送图片请求，避免打开网页时加载过多资源。
下面我们就做一个懒加载的小案例：
<body>
<div>我是内容</div> //在div加载过后 当img节点距离满足条件后加载img图片
<img id="img" src="" alt="">
添加样式：
<style>
body {
height: 1000px; //给body一个高度
}
div {
width: 200px;
height: 500px;
background-color: blue;
}
#img {
width: 300px;
height: 200px;
}
</style>
当你为图片的src赋值时，DOM节点渲染完毕时就会主动去请求src指向的资源，即使该图片不在用户的可视范围。那么，如果图片太多，加载页面的速度会就会变慢
<script>
var url = './image/2.jpg'; //将图片路径付给一个变量
var img = document.getElementById('img') //获取img
//给页面设置监听滚动事件
document.onscroll = function(e) {
var sT = document.documentElement.scrollTop ||
document.body.scrollTop;
if(sT >= img.offsetTop - window.innerHeight) {
img.src = url;
//img.offsetTop 图片距离顶部的距离 固定值
//window.innerHeight 可视区的高度
}
}
今天的分享就到这里啦，如有错误欢迎不吝指出。
