Vue实现懒加载

方式一. 使用第三方库intersection-observer-polyfill

1. 安装工具依赖

npm i intersection-observer-polyfill

2. 定义懒加载规则

import IntersectionObserver from 'intersection-observer-polyfill';let callback = null;IntersectionObserver.prototype.POLL_INTERVAL = 50;
const observer = new IntersectionObserver((entries) => {entries.forEach((el) => {if (el.intersectionRatio > 0) {if (callback) callback(el.target);observer.unobserve(el.target);}});
}, {rootMargin: '0px -100px 0px 0px',threshold: 0.1, // 元素出现的阈值
});
// observer.POLL_INTERVAL = 50export const observerBox = function (target, fn) {observer.observe(target);callback = fn;
};

3. 懒加载元素设置

observerBox(this.$refs.lazyElement, (target) => {// todo something});

方式二：原生实现元素是否在可视区

计算视口与元素距离，视口可视区滚动监听时计算需要注意要节流

 /*** 获取窗口滚动条的上边距* @return {int} 上边距*/
function getScrollTop() {return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;}/*** 获取窗口可见高度* @return {int} 高度*/getClientHeight: function () {return document.compatMode == 'CSS1Compat' ? document.documentElement.clientHeight : document.body.clientHeight;}function checkElementClientVisible($el) {var boxTop = $el.offset().top;var boxBottom = boxTop + $el.height();var scrollTop = getScrollTop();var clientBottom = scrollTop + getClientHeight();// 元素在可视区域内if ((boxTop > scrollTop && boxTop < clientBottom) || (boxBottom > scrollTop && boxBottom < clientBottom)) {return true;}return false;}

方式三：vue-lazyload 插件实现

缺点全局引入

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！