vue 实现广告悬浮效果,并防抖性能优化

节流防抖参考link:https://blog.csdn.net/zuorishu/article/details/93630578

<template><img :src="aiUrl" class="ai-img" id="ai-img" />
</template><script>
export default {data() {return {timer: null,aiUrl: require("@/assets/img/home/ai.png")};},mounted() {// window.addEventListener("scroll", this.startMove, true);window.addEventListener("scroll", this.debounce(this.startMove, 100), true);},destroyed() {window.removeEventListener("scroll", this.startMove);clearInterval(this.timer);},methods: {debounce(fn, delay) {var timeout = null; // 创建一个标记用来存放定时器的返回值return function (e) {// 每当用户输入的时候把前一个 setTimeout clear 掉clearTimeout(timeout);// 然后又创建一个新的 setTimeout, 这样就能保证interval 间隔内如果时间持续触发，就不会执行 fn 函数timeout = setTimeout(() => {fn.apply(this, arguments);}, delay);};},startMove() {var oDiv = document.getElementById("ai-img");var scrollTop = document.getElementById("popContainer").scrollTop;const iTarget = parseInt((document.documentElement.clientHeight - oDiv.offsetHeight) / 2 +scrollTop);clearInterval(this.timer);this.timer = setInterval(function () {var oDiv = document.getElementById("ai-img");var speed = (iTarget - oDiv.offsetTop) / 5;speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);if (oDiv.offsetTop == iTarget) {clearInterval(this.timer);} else {oDiv.style.top = oDiv.offsetTop + speed + "px";}}, 30);}}
};
</script><style lang="less">
.ai-img {position: absolute;bottom: 1.2rem;width: 1.34rem;z-index: 1000;
}
#contact-us-header {.ai-img {width: 1.34rem;position: absolute;bottom: 1rem;}
}
@media screen and (max-width: 1200px) {.ai-img {width: 1.34rem;position: absolute;bottom: 2rem;}
}
@media screen and (max-width: 979px) {.ai-img {width: 1.34rem;position: absolute;bottom: 2rem;}
}
@media screen and (max-width: 768px) {.ai-img {width: 1.34rem;position: absolute;bottom: 1rem;}
}
@media screen and (max-width: 690px) {.ai-img {display: none;}
}
@media screen and (max-width: 480px) {.ai-img {display: none;}
}
</style>

vue 实现广告悬浮效果,并防抖性能优化相关推荐

收藏这些vue项目性能优化方式，总有一天能用上
vue项目如何进行性能优化?下面本篇文章给大家分享一些vue项目一定会用到的性能优化方法,希望对大家有所帮助! 提起性能优化很多人眼前浮现的面试经验是不是历历在目呢?反正,性能优化在我看来他永远是前 ...
Android性能优化之APK瘦身详解(瘦身73%)
image 公司项目在不断的改版迭代中,代码在不断的累加,终于apk包不负重负了,已经到了八十多M了.可能要换种方式表达,到目前为止没有正真的往外推过,一直在内部执行7天讨论需求,5天代码实现的阶段. ...
性能优化的方法论建设
一. 相关概念系统性能有两个相关的概念: Throughput ,吞吐量.也就是每秒钟可以处理的请求数,任务数. Latency, 系统延迟.也就是系统在处理一个请求或一个任务时的延迟. 而这两者之 ...
Vue 防抖节流详细介绍（面试常客、去繁从简、性能优化）
本文主要介绍js中的防抖和节流以及在vue项目中如何使用它们来达到性能优化的目的. 前置知识点:js.闭包.es6.vue等. 使用背景: 很多场景下,页面具有交互性,免不了会触发一些事件以及发送一些 ...
关于前端性能优化问题，认识网页加载过程和防抖节流
前端性能优化-网页加载过程.性能优化方法.防抖和节流一.网页加载过程 1.加载资源的形式 2.加载资源的过程 3.渲染页面的过程 4.关于window.onload 和 DOMContentLoad ...
Vue项目的性能优化
目录前言一.代码层面的优化 1. **v-if 和 v-show 区分使用场景** 2. **computed 和 watch 区分使用场景** 3. **v-for 遍历必须为 item 添加 ...
[译] CSS 变量实现炫酷鼠标悬浮效果
原文: Stunning hover effects with CSS variables 我的博客:[译] CSS 变量实现炫酷鼠标悬浮效果我最近从Grover网站上的有趣的悬停动画中获得灵感.将 ...
vue实现鼠标悬浮显示全部内容
在做vue项目中常常会遇到内容太长显示不全这就用到鼠标悬浮效果了使用 (element-ui) <el-tooltip :content="全部内容" placeme ...
React Native悬浮效果组件
由于其他的原因,对于React Native相关的内容最近没有投入太多的关注,从去年年底出版了<React Native移动开发实战>后,对于React Native的关注就比较少了.最近 ...

vue 实现广告悬浮效果,并防抖性能优化

vue 实现广告悬浮效果,并防抖性能优化相关推荐

最新文章

热门文章

vue 实现 广告悬浮效果,并防抖性能优化

vue 实现 广告悬浮效果,并防抖性能优化相关推荐

最新文章

热门文章

vue 实现广告悬浮效果,并防抖性能优化

vue 实现广告悬浮效果,并防抖性能优化相关推荐