vue | 图片懒加载
懒加载其实就是延时加载
因为浏览器的可视范围是有限的,所以滚动到所需要显示的位置时在进行加载
方法一:事件监听(监听scroll这个事件,鼠标滚动触发)
前提:需得知窗口显示区的高度(通过window.innnerHeight获取)=> 高度1
需得知图片到视窗上边的距离高度(通过用元素的getBoundingClientReact().top来获取) => 高度2
思路:如果图片未能被看见那么说明 高度2 > 高度1 ,反之 高度2 < 高度1
实现:
// html部分的代码 <img data-src="1.png"> <img data-src="2.png"> <img data-src="3.png">
// js部分的代码 // 获取所有的img标签 const images = document.querySelectorAll('img') window.addEventListener('scroll', (e) => { images.forEach(image => { const imageTop = image.getBoundingClientRect().top if (imageTop < window.innerHeight) { const data_src = image.getAttribute('data-src'); image.setAttribute('src', data_src) } }) })
但是!此方法并不推荐使用,因为此方法滚动事件被触发了太多次,消耗大量资源。
方法二:IntersectionObeserver (是浏览器的构造函数)
实现:
// html部分和上个方法一样 // js部分如下 const images = document.querySelectorAll('img') // callback是回调函数,,那么一般是需要触发条件才能执行的,一般触发两次(一次为看见目标元素时,另一次为目标元素卡看不见时) const callback = entries => { entries.forEach(entry => { // console.log(entry) // entry.isIntersecting为目标元素 if (entry.isIntersecting) { const image = entry.target const data_src = image.getAttribute('data-src') image.setAttribute('src', data_src) // 结束观察,有几张图片就会触发几次 observer.unobserve(image) } }) } // 因为IntersectionObserver是构造函数,所以第一步要new一个实例 const observer = new IntersectionObserver(callback) images.forEach(image => { // 开始观察 observer.observer(image) })