手机直播源码，js实现懒加载、vue实现图片懒加载指令
图片懒加载
监听滚动条滚动事件，当视口的高度＋滚动高度，大于图片所在位置举例顶部的偏移量时(也就是距离)，加载图片资源
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div style="height: 1200px;"></div>
<img src="https://ts2.cn.mm.bing.net/th?id=OIP-C.Fi0rA6s5NQ1VIlwp9IzhIgHaKe&w=210&h=297&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2"
data-src="https://ts3.cn.mm.bing.net/th?id=OIP-C.D-43aYLc7We_sO_5ZSMIXgHaFj&w=288&h=216&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2" />
<script>
let img = document.getElementsByTagName("img");
let num = img.length;
let count = 0;
lazyload();
window.addEventListener('scroll', lazyload);
function getTop(el) {
var T = el.offsetTop;
// 迭代地获取元素及其父元素相对于文档顶部的累积偏移量
while (el = el.offsetParent) {
T += el.offsetTop;
}
// 循环后 返回元素相对于文档顶部的总偏移量
return T;
}
function lazyload() {
//视口高度
let viewHeight = document.documentElement.clientHeight || document.body.clientHeight;
//滚动高度
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
for (let i = count; i < num; i++) {
// 元素现在已经出现在视口中
if (getTop(img[i]) < scrollTop + viewHeight) {
// 如何图片等于默认图 则加载新图
if (img[i].getAttribute("src") !== "https://ts2.cn.mm.bing.net/th?id=OIP-C.Fi0rA6s5NQ1VIlwp9IzhIgHaKe&w=210&h=297&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2") continue;
img[i].src = img[i].getAttribute("data-src");
count++;
} else {
break;
}
}
}
</script>
</body>
</html>
使用浏览器提供的getBoundingClientRect()，优化上述代码： lazyload修改如下：
getBoundingClientRect()用于获取元素相对于视口的位置信息
function lazyload() {
let viewHeight = document.documentElement.clientHeight || document.body.clientHeight;
for (let i = count; i < num; i++) {
// getBoundingClientRect() 用于获取元素相对于视口的位置信息
// 当相对于视口位置 小于等于视口时说明图片已经可见了
if (img[i].getBoundingClientRect().top < viewHeight) {
if (img[i].getAttribute("src") !== "https://ts2.cn.mm.bing.net/th?id=OIP-C.Fi0rA6s5NQ1VIlwp9IzhIgHaKe&w=210&h=297&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2") continue;
img[i].src = img[i].getAttribute("data-src");
count++;
} else {
break;
}
}
}
以上就是 手机直播源码，js实现懒加载、vue实现图片懒加载指令，更多内容欢迎关注之后的文章
标签：src,vue,img,el,源码,let,document,加载 From： https://www.cnblogs.com/yunbaomengnan/p/17864707.html