xml地图|网站地图|网站标签 [设为首页] [加入收藏]
基于用户行为的图片等资源预加载,在行内元素
分类:web前端

基于用户行为的图片等资源预加载

2016/06/04 · CSS · 预加载

原文出处: 张鑫旭(@张鑫旭)   

在行内元素前注入一个换行

2016/06/28 · CSS · 行内元素

原文出处: Chris Coyier   译文出处:众成翻译   

我遇到了一个小问题,我有一个 span 在 header 中,而我想要在 span 的前面产生一个换行。郑重声明,在 span 前面插入一个 <br> 标签当然没问题(而事实上,你还可以显示/隐藏这个标签,这非常有用)。但是…不得不用 HTML 去做一个布局相关的事情始终感觉有点奇怪。

因此,让我们来深入探索一下,在这个探索中,我们会多次说到“然而…”。

XHTML

<h1 class="one"> Break right after this <!-- <br> could go here, but can we do it with CSS? --> <span> and before this </span> </h1>

1
2
3
4
5
6
7
8
9
10
11
<h1 class="one">
 
  Break right after this
 
  <!-- <br> could go here, but can we do it with CSS? -->
 
  <span>
    and before this
  </span>
 
</h1>

CSS 动画的 steps

2015/09/28 · CSS · 动画

本文作者: 伯乐在线 - risker 。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

animation默认以ease方式过渡,会以在每个关键帧之间插入补间动画,所以动画效果是连贯性的。easelinear等之类的过渡函数都会为其插入补间。但有些效果不需要补间,只需要关键帧之间的跳跃,这时应该使用steps过渡方式。本文后面有案例。

一、图片的懒加载和预加载

懒加载和本文要提到的预加载实际是不同的概念。

典型的懒加载,例如本博文章的图片,当用户滚动图片进入窗体的时候,才去加载;或者用户点击选项卡,原本隐藏的图片此时再去加载,这个也称之为懒加载。

而预加载则是,用户还没有行为发生,资源已经加载完毕,从这一定义来讲,我们传统图片啪啪啪全部加载完毕,本质上也是预加载,好处就在于,体验好啊,没有泛白或者菊花的出现。不足也很明显,那就是资源可能白白加载了,尤其视频之类的,小明打开bilibili就是来围观广告的,结果,百兆视频巴拉拉魔仙般全加载好了,搞得好像流量不要钱的样子,也是不可取的。

那有什么办法可以把懒加载的省资源省流量和预加载良好体验结合在一起呢?有一些比较好的案例,那就是基于用户行为的资源预加载。

块级元素能做到

不同于 `,我们可以使用一个

`,而之所以用 div 可以是因为它是一个块级元素。

但是我们有使用 span 的理由,因为设计上要求我们用 span。在换行之后的文本应该是一个行内/行内块元素,因为我们可能想给它一个背景或者 padding 或者其他什么。

图片 1

steps用法

简单地说,就是原本一个状态向另一个状态的过渡是平滑的,steps可以实现分布过渡。steps用法 :

CSS

steps(n,[start | end])

1
steps(n,[start | end])

n是一个自然数,steps函数把动画分成n等份。

  • step-start 等同于 steps(1,start) ,动画分成 1 步,动画执行时以左侧端点为开始
  • step-end 等同于 steps(1,end) ,动画分成 1 步,动画执行时以结尾端点为开始

没懂对不对?我也没懂,上面是官方的说法。接着往下看吧

二、基于用户行为的资源预加载

前段时间做了个俗称H5的页面,共16个分页,近乎全矢量,三五请求,秒加载,除去音乐和统计脚本,100K不到,华丽的平面设计风格,浮夸的矢量动画效果,爪机直接点击此链接围观(PC浏览器会直接跳走), 如果你是桌面浏览器访问的,拿起你的手机扫下面的码子~

图片 2

其中,就用到了基于用户行为的预加载。

此H5页面近乎全矢量,但实际上还是有图片使用的,例如,2007年也就是那个有烟雾canvas效果的哪一年的那个粽子,如果大家查看数据请求,会发现首屏根本就没有图片资源的请求,但是,我们体验2007年的时候,却没有任何的因图片延时加载带来的视觉上的挫顿感,为什么呢?

那是因为,你要查看年份,你就要必须经过一个步骤,就是长按下面的“按住探索”按钮:
图片 3

此时,按住就是一个用户行为,他似乎宣告着,我即将进入某一年份,一些图片资源可以预加载了。所谓预加载,就是图片不一定会被用户看到,但是加载了;基于用户行为的预加载就是,虽然在用户看不到的时候加载了,但是,用户却有更大或者说很大的概率会看到此图。算是,懒加载和传统预加载中间的一种权衡策略。

再举个更典型,更常见,更有实用价值的例子,那就是点击事件下的选项卡切换效果的预加载。

下图所示是一个常见的选项卡:
图片 4

此选项卡对应面板内容是包含图片信息的,由于,选项卡是点击行为触发的切换效果,因此,后面的“美女2”和“美女3”按钮对应的图片如果不点击,用户是永远都看不到的,此时这两位美女图片就没必要加载,因为,很可能,用户不会点这两个选项卡按钮。

因此,选项卡2和3我们需要岁图片进行懒加载处理,也就是页面载入默认不加载的。

然后,我们通常的处理是当用户去点击选项卡按钮的时候,在对应面板呈现的时候,我们再去加载图片内容。于是,就存在这样一个不好的体验——由于内容呈现瞬时,而图片呈现是异步的,就很容易出现选项卡主体内容切换过来了,结果是个空白,过了会儿图片才出现。

其实,我们可以基于某些行为对此图进行不一样的预加载,来提示我们的浏览体验,怎么做呢?

我们绝大数用户都是鼠标去点击选项卡的,而点击选项卡之前会有其他一些行为发生,例如:

mouseover按钮的容器 → mouseover按钮 → mousedown按钮等。

于是,就给了我们机会,在click行为发生之前去预加载图片,例如,我们鼠标hover按钮的时候。一般一个用户hover一个按钮再click行为技术,说有0.5秒的时长一点都不为过吧,因为光鼠标按下再抬起就上百毫秒了。从hover到click之间的这段时间,已经足够我们图片进行预加载了。而hover到click的行为是极大概率事件。于是乎,我们通过提前捕捉用户的其他行为实现了懒加载和预加载的完美结合!

眼见为实,您可以狠狠地点击这里:选项卡用户hover行为下的图片预加载demo

点击选项卡,十有八九图片瞬间就呈现了,就是因为你hover的时候,图片已经去加载了。大家有兴趣可以打开控制台观察资源的加载,就可以明白上面巴拉巴拉说的hover预加载是怎么回事了。

你可以通过伪元素插入换行

这很容易:

CSS

h1 span::before { content: "A"; }

1
2
3
h1 span::before {
  content: "A";
}

然而… `` 是一个行内元素。换行不会产生任何效果!就像真正的回车换行一样不产生。

我们可以通过样式让空白符生效,来强制让换行有效…

CSS

h1.two span::before { content: "A"; white-space: pre; }

1
2
3
4
h1.two span::before {
  content: "A";
  white-space: pre;
}

这样实际有效果了。然而… 由于 padding 和背景存在,它把左 padding 的部分留在了上一行:

图片 5

我们可以使用 box-decoration-break: clone; 来修复这个“左边缘环绕”的问题,然而… 它会导致上一行产生更大的黑块:(此处不明白的同学可以看这个例子——译者注)

图片 6

box-decoration-break 对于处理一些问题来说好极了,但不包括这个问题。

如果我们将 span 变成 inline-block,那么换行将会发生在那个块里面,这也不是我们想要的效果:

图片 7

将伪元素设置成块级元素,让 span 保持行内元素,这样也不行:

图片 8

辨析steps

可以在demo中查看step的区别:狠狠地戳下去

steps(4,start)steps(1,start) 的最大区别就是每次动画”跳跃”的时候,即从 0% -> 25% 的时候,steps(1) 直接一步到位,瞬间从0%的状态跳到25%的状态,而steps(4)会逐渐走4步,即从 0% -> 25% 要跳 4 步 !

慢慢体会一下,应该就知道steps的作用了吧

本文由澳门新葡亰手机版发布于web前端,转载请注明出处:基于用户行为的图片等资源预加载,在行内元素

上一篇:Web前端框架与类库的思考,用法教程 下一篇:雪碧图自适应缩放,单标签之美
猜你喜欢
热门排行
精彩图文