Vue中使用路由。在切换的时候，由于页面重新渲染，会先移除原来的路由，再显示新路由，首次加载的时候，就会闪动。 可以使用动画，设置淡入淡出。这样就可以避免闪动了。 Vue自带一个动画组件 <Transition> 是一个内置组件，无需注册。它可以将进入和离开动画应用到通
2024-01-26
前端开发的时候，有些列表或比较长的页面会存在有很多图片需要加载。一次加载太多图片，会占用很大的带宽，影响网页的加载速度。为提升用户体验，希望视觉窗口外的图像不会加载，让用户浏览到什么地方，就加载该处的图片。这样能明显减少了服务器的压力和流量，也能够减小浏览器的负担，降低卡顿现象发生。 网页中如
2023-12-15
网页加载的时候先显示一个动画，等加载完成后，再显示网页，这样做过度比较自然。用户体验感比较好。 原理 原理是，给网页顶部放一个元素，元素占满全屏，加载完成后，再通过JS移除这个元素即可。 简单在网页顶部写个代码，一个div，作为容器，然后设置样式，给占满全屏。 <style>
2023-12-09
"我正准备点那里！为什么移走了？?" 布局偏移可能会分散用户的注意力。想象一下，您已经开始阅读一篇文章，可是页面上的元素突然位移，让您措手不及，于是您不得不再次找到先前阅读的位置。这在网络上十分常见，包括在阅读新闻或尝试单击"搜索"或"添加到购物车"按钮时。这种体验在视觉上十分扎眼且令人郁闷。
2023-04-16
vite如果把全部的文件都给本地打包的话，体积就很大，所以把公共库给打包出来，就能减少很多体积。 使用vite插件vite-plugin-cdn-import，很方便的打包。下面以vue和element-plus为例。 安装插件 npm install vite-plugin-cdn-im
2023-01-27
flex布局汇总，如果子元素如果文字长度超出，并不会按预期“文字超出部分显示为用省略号代替”显示，文字超出部分会撑开容器显示。 已经给超出文字的div设置了如下css overflow:hidden; text-overflow: ellipsis; white-space: nowra
2022-05-05
JavaScript 中的 this，因其灵活的指向、复杂的使用场景一直是面试中的热点，不论是初级还是中高级开发者，这都是一道必考题。这个概念虽然基础，但是非常重要，是否能深刻理解 this，是前端 JavaScript 中进阶的重要一环。this 指向多变，很多隐蔽的 bug 都缘于它。与此同时，
2022-01-01
静态资源 CDN 公共库是指一些服务商将我们常用的 JavaScript 库存放到网上，方便开发者直接调用，并且还对其提供 CDN 加速，这样一来可以让用户加速访问这些资源，二来还可节约自己服务器的流量。 目前国内的CDN，主要同步的资源来源于：https://cdnjs.com/ 也就
2021-12-27
Fancybox是图片灯箱插件，lazyload是延迟加载插件。如果两个插件一起使用，由于图片延迟加载，所以在只加载了第一张图片的时候，点击第一张图片，弹出灯箱，在灯箱中切换下一张图片，会获取不到延迟加载的图片，可能会获取到站位图片。 解决方法，为延迟加载的图片，添加data-src 属性，属
2021-11-23
网页头部加一个网页加载进度条，看起来还是挺有意思的。其实制作很简单，只需要用JS监听网页加载进度即可。 使用jQuery $({property: 0}).animate({property: 100}, { duration: 5000,//进度条加载进度的速度
2021-03-10
一般来说，开发者对网页字体使用会相对接触比较少一些，使用最多也无非是 font-family ，以及可能会加载几个网络字体。 加载字体可能会遇到些问题，在字体加载完成之前，网页文字会变成空白，直到字体加载完成，字体文件不大还好说，但是文件一大，就要等很久才能显示。 可以使用如下方法来解
2021-03-06
虽然说Bootstrap已经对外观进行很大的改进了，但是Bootstrap的默认界面还是很非主流，并不太时候我们的审美。MDB 5 UI KIT则是基于Bootstrap 5的一款前端UI框架，改进了Bootstrap的样式，让组件变得很好看。 默认界面好看太多了，如下： 同时，
2021-03-05
在做网页开发中,前端页面显示时经常会用到字体库图标,如 iconfont, fontawesome, glyphicons, lonicons等 其中最著名的就是fontawesome了，现在版本已经更新到了5.x 一.fontawesome本质原理 fontawesome本质上是把图标做
2021-02-21
Vue3已经出来有这么一段时间了，现在项目可以迁移到vue3上面去了，vue3大升级，性能更强，体积更小，值得使用。 环境安装 安装vue-cli脚手架，帮助我们快速搭建vue项目 项目地址：https://cli.vuejs.org/zh/ 安装命令，以npm为准，其他的环境请见官
2020-11-02
网页布局（layout）是 CSS 的一个重点应用。 布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C 提出了一种新的方案----Fl
2020-09-23