乐趣区

关于前端:一个有趣的图片加载效果

jiezi

日常在业务中会常常应用到图片，而波及到一些大图的加载期待的工夫较长，个别为了用户更好的体验，会应用一些不同的图片加载成果，比方以下几种状况：

  1. 骨架屏：在页面上用占位框架代替图片，展现出图片的大抵构造和区域，给用户一种“正在加载”的视觉体验。
  2. 进度条：用进度条的模式展现图片的加载进度，让用户可能理解图片的加载状况。
  3. 旋转动画：应用旋转的图标或者动画展现图片正在加载的状态，给用户一个视觉上的反馈。
  4. 含糊淡入：先展现一个高斯含糊的小图或者低分辨率的图片，等大图加载实现后再替换成高清的图片。

当然每种状况都有对应的利与弊，所实用的场景也有所不同，明天看到一个很有创意的图片加载成果，针对一些特定的场景和图片内容成果感觉很不错。以下是加载的效果图：

留神：以下本文探讨的加载成果不太实用于图片的第一次加载，只是一种交互成果供参考

整体的加载成果就是图片被横向拉伸了一样，随着加载的过程图片内容逐步显示进去，这对于一些图片背景中蕴含纯色的状况下的成果更好，因为纯色局部不管怎么拉伸也是纯色，只有其余色彩在拉伸的过程中会交错在一起，随着加载的过程逐步看到庐山真面目，不得不说这是一个不错的交互的成果。

image-rendering: pixelated

这就是明天的配角，image-rendering: pixelated 是一种 CSS 属性，用于管制图像在缩放或拉伸时的显示方式。设置为 pixelated 后，浏览器会以最靠近原始图像的形式出现缩放后的图像，使得图像看起来像是由像素点组成的。这种形式与传统的平滑缩放形式不同，能够更好地展示像素格调的图像，例如像素艺术作品、游戏素材等。简略来说这个 pixelated 能够 让图片变成像素风，也就是马赛克的成果。

image-rendering 属性能够管制图像在缩放或拉伸时的显示方式，常见的属性值有以下几种：

  1. auto: 默认值，浏览器会依据具体情况主动抉择适合的显示方式进行出现。
  2. crisp-edges: 将图像出现为锐利的边缘，成果相似于将图像强行放大或放大到整数像素的尺寸。
  3. pixelated: 以原始图像最靠近的形式出现缩放后的图像，使得图像看起来像是由像素点组成的。

明天次要介绍的是 pixelated，简略实用比方给一下图片设置 pixelated 后的成果和原图比照就能够清晰的看到马赛克像素化的成果。

.pixelated {image-rendering: pixelated;}

tips: 要达到马赛克成果前须要将图片放大至含糊的成果才会失效，如果实质是清晰的图片是无奈失效的，这里是将失常的图片放大再设置更大的宽高后进行设置 pixelated。

察看这个成果和本文一开始的飞机加载成果之间仿佛并没有什么显著的分割。这里应用了一个奇妙的实现形式，咱们应用的图片内容次要都是横向排列的，从左到右逐步加载。仔细观察能够发现，加载过渡区域的内容是基于以后纵向切面的像素点色彩值计算的。当咱们一直向右挪动时，对应像素点的色彩值也会一直变动，从而导致加载横条的色彩内容一直变动。上面这张示例图体现了这种成果更加显著：

这里其实是用到了 scale 进行放大，然而只放大了 X 轴，所有成果就是被横向拉的很长。

transform: scale(6000, 1);

那么这段代码怎么利用失效呢？

这里须要再引入一个知识点，以下援用来源于 mozilla。

CSS 属性 image-rendering 用于设置图像缩放算法。它实用于元素自身，实用于元素其余属性中的图像，也利用于子元素。

重点是也利用于子元素。所以咱们基于以后的图片元素扩大一个伪元素，在伪元素进行 pixelated 属性设置，外围代码如下：

.thing::after {
  left: 300px;
  transform-origin: 0 0;
  transform: scale(6000, 1);
  image-rendering: pixelated;
  transition: all 2s cubic-bezier(.5,0,0,1) ;
}

.thing:hover::after{left: 720px;}

伪元素默认设置了 300px 的偏移量，鼠标悬停时设置为 720px，再配合 transition 即可产生动起来的成果，但这时候伪元素的色值是基于图片最左侧的色值不会有变动，如下所示：

所以这个时候还须要减少另一个属性 background-position 上场，要让伪元素静止时对应上图片上的纵向色值，所以减少 background-position 和 left 的数值一样，这里须要留神的是咱们是要将伪元素的背景向左挪动，所以是设置正数，代码如下：

.thing:after {background-position: -300px 0;}

.thing:hover:after{background-position: -720px 0；}

最初来看一下不同的图片遇上后的离奇成果，当上面这种图片遇上从左往右逐步显示的成果后会产生另一种不错的感觉。

应用 pixelated 后的成果，原本界面上的曲线变成了直线逐步延长显示。

这个蜥蜴应用了纯色背景，所以在加载过程中拉伸是后也是纯色的，那么就剩下主体内容在发生变化，这也是一种不错的体验成果。

码上掘金在线体验：

https://code.juejin.cn/pen/7225892695250567223

参考：https://codepen.io/andyfitz/pen/XWxWgyY

最初

本文介绍了一个乏味的图片加载成果，次要应用了 image-rendering: pixelated 配合 background-position 产生的过渡加载成果。加载成果不太实用于图片的第一次加载，只是一种交互成果供参考，针对不同的图片会产生别样的加载格调，比方下面的直线内容加载变为曲线，纯色背景的内容的加载只会有主体内容发生变化，有趣味的能够尝试其余内容的图片兴许你会发现新大陆。

看完本文如果感觉有用，记得点个赞反对，珍藏起来说不定哪天就用上啦～

专一前端开发，分享前端相干技术干货，公众号：南城大前端（ID: nanchengfe）

退出移动版