判断元素是否在可视区域
1. 获取屏幕可视区高度：document.documentElement.clientHeight
2. 获取元素距顶部的高度：element.offsetTop
3. 获取滚动高度：document.documentElement.scrollTop
4. 若满足：2-3<1,那么元素就出现在可视区域
1. 获取元素到可视区域顶部的距离：var bound = element.getBoundingClientRect()
2. 获取可视区域的高度：window.innerHeight
3. 若满足bound.top<=window.innerHeight,那么元素就出现在可视区域
利用IntersectionObserver函数自动观察元素是否在可视区域内
rush:js;">
var watch = new IntersectionObserver(callback,option);
//开始观察
watch.observe(el);
//停止观察
watch.unobserve(el);
//
关闭观察器
watch.
disconnect();
第一种很多人都用过，所以我们就用第二种写一下
rush:js;">
//判断
图片是否出现在可视区域内
function isInSight(el) {
const bound = el.getBoundingClientRect();
const clientHeight = window.innerHeight;
return bound.top <= clientHeight + 100;
}
//加载
图片
let index = 0;
function checkImgs() {
const imgs = document.querySelectorAll('.my-photo');
for( let i = index; i < imgs.length; i++){
if(isInSight(imgs[i])){
loadImg(imgs[i]);
index = i;
}
}
}
function loadImg(el) {
if(!el.src){
const source = el.dataset.src;
el.src = source;
}
}
//函数节流
//函数节流是很重要的思想，可以防止过于频繁的操作dom
function throttle(fn,mustRun = 500) {
const timer = null;
let previous = null;
return function () {
const now = new Date();
const context = this;
const args = arguments;
if(!previous){
previous = now;
}
const remaining = now -previous;
if(mustRun && remaining >= mustRun){
fn.apply(context,args);
prev
IoUs =
Now;
}
}
}
//
调用函数
window.onload=checkImgs;
window.onscroll = thr
ottle(checkImgs);
我们在用第三种方法写一个demo
io.observe(item));
}
function loadImg(el) {
if (!el.src) {
const source = el.dataset.src;
el.src = source;
}
}
const io = new IntersectionObserver(ioes => {
ioes.forEach(ioe => {
const el = ioe.target;
const intersectionRatio = ioe.intersectionRatio;
if (intersectionRatio > 0 && intersectionRatio <= 1) {
loadImg(el);
}
el.onload = el.onerror = () => io.unobserve(el);
});
});
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《》、《》、《》、《》、《》、《》及《用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
