网站侧面菜单展开怎么做,下载 asp网站,p2p网站制作,专业网站制懒加载
延迟加载#xff0c;对于一个很长的页面#xff0c;优先加载可视区域的内容#xff0c;其他部分等进入可视区域时再加载
懒加载作用
是一种网页性能优化的方式#xff0c;它能极大的提升用户体验。比如一个页面中有很多图片#xff0c;但是首屏只出现几张#…懒加载
延迟加载对于一个很长的页面优先加载可视区域的内容其他部分等进入可视区域时再加载
懒加载作用
是一种网页性能优化的方式它能极大的提升用户体验。比如一个页面中有很多图片但是首屏只出现几张这时如果一次性把图片全部加载出来会影响性能。这时可以使用懒加载页面滚动到可视区再加载。优化首屏加载。
图片懒加载
监听滚动条滚动事件当视口的高度滚动高度大于图片所在位置举例顶部的偏移量时(也就是距离)加载图片资源
index.html
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodydiv styleheight: 1200px;/divimg srchttps://ts2.cn.mm.bing.net/th?idOIP-C.Fi0rA6s5NQ1VIlwp9IzhIgHaKew210h297c8rs1qlt90o6pid3.1rm2data-srchttps://ts3.cn.mm.bing.net/th?idOIP-C.D-43aYLc7We_sO_5ZSMIXgHaFjw288h216c8rs1qlt90o6pid3.1rm2 /scriptlet 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?idOIP-C.Fi0rA6s5NQ1VIlwp9IzhIgHaKew210h297c8rs1qlt90o6pid3.1rm2) 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?idOIP-C.Fi0rA6s5NQ1VIlwp9IzhIgHaKew210h297c8rs1qlt90o6pid3.1rm2) continue;img[i].src img[i].getAttribute(data-src);count;} else {break;}}}
使用IntersectionObserver()再次优化上述代码
IntersectionObserver是浏览器原生提供的构造函数用于查看某个元素是否进入了视口(viewport)用户能否看到该元素
修改上述代码 scriptlet img document.getElementsByTagName(img);const observer new IntersectionObserver(changes {console.log(changes)//changes 是被观察的元素集合for (let i 0, len changes.length; i len; i) {let change changes[i];// 通过这个属性判断是否在视口中if (change.isIntersecting) {const imgElement change.target;imgElement.src imgElement.getAttribute(data-src);// IntersectionObserver 对象的一个方法用于停止对指定元素的观察observer.unobserve(imgElement);}}})Array.from(img).forEach(item {observer.observe(item)});/script
内容懒加载
一个页面有n条订单每次可以给他显示10条等用户拖动滚动条滚动到订单列表底部一段距离时再显示10条直到加载完
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylespan {display: block;}/style
/headbodydiv styleheight: 1200px;1/divdiv classboxspan开始/span/divscriptlet div document.getElementsByClassName(box)[0];let lastSpanElement div.querySelector(span:last-child);const observer new IntersectionObserver(changes {console.log(changes)//changes 是被观察的元素集合for (let i 0, len changes.length; i len; i) {let change changes[i];// 通过这个属性判断是否在视口中if (change.isIntersecting) {for (let i 0; i 10; i) {const spanElement document.createElement(span);spanElement.textContent 这是第 ${i 1} 个span标签;div.appendChild(spanElement);}observer.unobserve(lastSpanElement);lastSpanElement div.querySelector(span:last-child);observer.observe(lastSpanElement)}}})observer.observe(lastSpanElement)/script
/body/html 详情可参考(IntersectionObserver API详解_ IntersectionObserver 交叉观察器 - 简书 (jianshu.com) IntersectionObserver 浏览器的5种观察器 app.directive
自定义全局指令它有两种写法
// 注册对象形式的指令
// 所有生命周期都可
app.directive(my-directive, {/* 自定义指令钩子 */
})// 注册函数形式的指令
// 固定只在2个生命周期上触发, mounted 和 updated
app.directive(my-directive, () {/* ... */
}) vue中install方法
可供我们开发新的自定义指令跟全局注册组件第一个参数是vue的构造器第二个参数是可选的选项对象
然后再开始编写扩展指令之图片懒加载指令
export default {install (app) {app.component(XtxSkeleton.name, XtxSkeleton)app.component(XtxCarousel.name, XtxCarousel)defineDirective(app)}
}import defaultImg from /assets/images/200.png
// 扩展指令
const defineDirective (app) {// 图片懒加载app.directive(lazyload, {mounted(el, binding) {const observer new IntersectionObserver(([{ isIntersecting }]) {if (isIntersecting) {// 停止观察observer.unobserve(el)el.onerror () {// 图片加载失败 设置默认图el.src defaultImg}// binding 是对象.value就是绑定指令的值el.src binding.value}}, {//目标元素和根元素相交部分的比例达到该值的时候//callback 函数将会被执行threshold: 0.01})// 开始观察observer.observe(el)}})
}
使用扩展的图片懒加载指令
img alt v-lazyloadgoods.picture /
扩展
vue还有许多工具库其中也有类似的api可以实现这种功能列如 useIntersectionObserver | VueUse
