rails7的turbo页面加载问题
rails 6时代,每个页面加载的时候,又有一个turbolinks-progress-bar 来显示页面的load。
在页面顶部,通过动画的方式从左向右延伸来显示页面加载的进度。
rails7也包含这个动画,不过略有不同,这个进度表的默认class改成了,turbo-progress-bar. 除此之外别的没有变化。
不过rails7 有更好的处理方式。
因为默认所有的页面的加载都通过fetch来抓取页面。
在fetch的过程中在,真个网页是有的<html>标签是被加了属性的。
<html> 变成了 <html aria-busy="true" data-turbo-preview>
所以说如果想要显示这个页面的变化,可以通过css来控制这个期间的整个 html页面的样式。
比如给页面加个半透明。
html[aria-busy ]{
opacity: 0.5;
}
二、当然还要更加复杂的办法:
比如:
在页面顶部,通过动画的方式从左向右延伸来显示页面加载的进度。
rails7也包含这个动画,不过略有不同,这个进度表的默认class改成了,turbo-progress-bar. 除此之外别的没有变化。
不过rails7 有更好的处理方式。
因为默认所有的页面的加载都通过fetch来抓取页面。
在fetch的过程中在,真个网页是有的<html>标签是被加了属性的。
<html> 变成了 <html aria-busy="true" data-turbo-preview>
所以说如果想要显示这个页面的变化,可以通过css来控制这个期间的整个 html页面的样式。
比如给页面加个半透明。
html[aria-busy ]{
opacity: 0.5;
}
二、当然还要更加复杂的办法:
比如:
.hidden{ opacity: 0; filter: blur(5px); transition: opacity, filter 1s; } @media(prefers-reduced-motion){ .hidden{ transition: none; } } .show{ opacity: 1; filter: blur(0); }
<h1 class="hidden" style="text-align:center;font-size:50px;">About me</h1
>
import "@hotwired/turbo-rails" import "controllers" const observer = new IntersectionObserver((entries) => { entries.forEach((entry) => { console.log(entry) if (entry.isIntersecting){ entry.target.classList.toggle('show', entry.isIntersecting); } else { entry.target.classList.remove('show'); } }); }); document.addEventListener("turbo:load", (event) => { console.log("turbo:load. runs every time a page is loaded"); const hiddenElements = document.querySelectorAll(".hidden"); hiddenElements.forEach((el) => observer.observe(el)); });
阅读量: 738
发布于:
修改于:
发布于:
修改于: