木灵鱼儿
阅读:3708
高仿Skeleton Screen 骨架屏
现在给网站做了一个load的加载效果,但是目前流行的应该是Skeleton Screen 骨架屏,这个原本是在苹果端app里制作的,然后有人自己移植到web端,常见h5架构页面,如饿了么、知乎、facebook、酷安,都有应用,那么我就很好奇了,到底是怎么做的,于是百度了一下。
了解Skeleton Screen 骨架屏
解释有下:
简单来说,骨架屏就是在页面内容未加载完成的时候,先使用一些图形进行占位,待内容加载完成之后再把它替换掉。
通过 puppeteer 在服务端操控 headless Chrome 打开开发中的需要生成骨架屏的页面,在等待页面加载,渲染完成之后,在保留页面布局样式的前提下,通过对页面中元素进行删减或增添,对已有元素通过层叠样 式进行覆盖,这样达到在不改变页面布局下,隐藏图片和文字,通过样式覆盖,使得其展示为灰色块。然后将修改后的 HTML 和 CSS 样式提取出来,这样就是骨架屏了.
那么从上面的解释中我们可以得知,其原理就是在加载之前就要生成骨架页面,骨架页面的原理其实就是在不改变页面布局的情况下,通过修改html和css将原有的内容进行隐藏覆盖,然后等待加载完毕后再将内容替换出来。
这样一想,就很简单了,依我个人之见是这样的:网页的初始状态就是骨架结构,用户打开就是骨架状态,当页面dom加载完毕后,就开始慢慢将骨架的样式隐去,显示出内容。
如图:
代码
我的想法是这样,因为你不可能去判断到每个元素的内容是否加载完毕,即便你给每个元素添加load事件,那么资源的损耗就和实际收入完全不成正比,所以我是在load事件完成后将所有的骨架慢慢消失,本来想通过计算透明度的方式来设置骨架消失的动效,但是经过这段时间的使用这种计算方法,发现非常消耗资源,为此我采用了业界常用的class方法。
首先给需要显示骨架的元素添加一个名为vu
的class,这个class本身relative,然后创建他的伪类before,通过伪类的absolute浮动到最上层,然后添加背景层将该元素的内容遮盖。
此时已经达到了我预期的效果。
css
.vu {
position: relative;
}
.vu::before {
content: "";
position: absolute;
top: 0;bottom: 0;
left: 0;right: 0;
height: 100%;
background-color: #eee;
opacity: 1;
transition: opacity 1s;
}
.nu::before {
opacity: 0;
}
js
js部分我就判断,当load事件加载完毕——获取class名为vu
的元素集合,for语句循环这个数组,给每个元素添加一个Timeout延迟运行,这样就可以达到骨架一个个慢慢消失而不是集体消失,然后我们使用的时候添加的是class=nu,所以在opacity的动画还未消失前,我们不能直接删除这个vu
,为此又添加了一个延迟,在1s后删除,这样刚好在动画完毕后class也删除了,这样既不影响原来的布局也不会造成混乱,非常奈斯!
window.onload = function(){
var vu = document.getElementsByClassName('vu')
for(var i = 0;i<vu.length;i++) {
var son = vu[i];
setson(son);
}
function setson(son) {
setTimeout(function(){
addClass(son,'nu');
setTimeout(function(){
removeClass(son,'vu');
},1000)
},500)
}
function addClass(element,name) {
if(!element.className.match(new RegExp('(^|\\s)'+name+'(\\s|$)'))) {
element.className += ' ' + name;
}
}
function removeClass(element,name) {
if(element.className.match(new RegExp('(^|\\s)'+name+'(\\s|$)'))) {
element.className = element.className.replace(new RegExp('(^|\\s)'+name+'(\\s|$)'),' ');
}
}
};
效果图+在线预览:
浏览地址点击
资源下载
本人也提供资源下载,有兴趣的可以自己下载使用,当然也是为了我以后忘记了还能再看看!
蓝奏云 密码:8lc9
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

相关推荐
高仿Skeleton Screen 骨架屏 V2
经过多次修正,差不多就是这样了,再加强就比如针对性的做适配,总体来说,要想简单点还是目前自己用的这个简单些。效果图:源码:蓝奏云 密码:b077

JS 预加载2
单独的图片预加载已经完成,这里我们为上一张和下一张图片预加载做个准备。主要就是先将上一张和下一张的大图同时加载,在同一个图片点击事件中(当某个图片被click后)。首先就是我们要获取到上一张和下一张的图片索引位置,再通过这个值计算后来锁定对应的图片。首先我们先获取当前图片父元素的父元素的索引位置,这里要先说名一下关系链:div----dl----dt----img//这里获取到的是dl元素,每个dl元素里面都有一个img,所以索引值是一样的 var children = this.parentNode.parentNode;获取到dl后我们要再得到这个元素在dl元素数组中的索引值,之前我...

《Yodu》预加载如何加载到自己需要的js内容
主题开启预加载可以加快访问速度,但是在一些程度上还是有一些取舍,比如js中的window.onload事件,就会只运行一次,当你进入到下一个页面的收,window.onload里面执行的内容就完全停止了,甚至可以说没有了,有点像是,你吃着吃着突然就换了一个肚子,这样虽然吃的也多,但是不一样了啊,和原来的对不上了,所以我们还是要针对这种情况,让js代码再次运行,这就相当于换了个肚子,还要接上才能用。询问了下泽泽,他说《Yodu》的预加载在footer.php中,在if (isInitialLoad === false) {}中,具体如下图:我们可以看到在这个里面其实有很多if的判断语句,这...

melody
Google Chrome Windows 10假如1个页面只一个列表,整个列表都需要异步ajax,那这里的懒加载,只是一个动销吗,因为看示例,只有当页面有数据时,才能有元素,才能添加 vu 类
木灵鱼儿
FireFox Windows 10怎么说呢,这个东西就是一个占位,你可以将元素伪类作为遮罩,也可以做一个相似的遮罩元素展示,内容出来再隐藏,我这都是瞎琢磨,现在前后端分离占主力,大部分框架都有预设骨架效果,你可以看看,没必要自己研究了
melody
Google Chrome Windows 10了解。
by the way, cool website
木灵鱼儿
FireFox Windows 10客气了,如果你评论时留的qq邮箱啥的,其实可以收到评论回复提醒的[tv_doge]
melody
Google Chrome Windows 10是留了邮箱的哈,只是我之前没注意[笑哭]
木灵鱼儿
FireFox Windows 10[tv_点赞]我都是用的qq邮箱
melody
Google Chrome Windows 10动效
南楼月下
Google Chrome Windows 10实用处很大![tv_doge]
木灵鱼儿
FireFox Windows 10[妙啊]现在很多框架都有这种效果,我还没研究他们是怎么做的