性能及体验优化|云音乐项目 | 前端进阶之旅

本节代码对应 GitHub 分支: chapter3

# 图片懒加载

在大量图片加载的情况下，会造成页面空白甚至卡顿，然而我们的视口就这么大，因此只需要让视口内的图片显示即可，同时图片未显示的时候给它一个默认的 src，让一张非常精简的图片占位。这就是图片懒加载的原理。当然，在本项目中，我们采取一个成熟的方案 react-lazyload 库，易上手，效果不错。

npm install react-lazyload --save
//components/list.js
// 引入
import LazyLoad from "react-lazyload";

//img 标签外部包裹一层 LazyLoad
<LazyLoad placeholder={<img width="100%" height="100%" src={require ('./music.png')} alt="music"/>}>
  <img src={item.picUrl + "?param=300x300"} width="100%" height="100%" alt="music"/>
</LazyLoad>

@前端进阶之旅: 代码已经复制到剪贴板

至于默认的占位图片，大家可以去相应分支去拿。

现在我们做到了视口内的图片显示真实资源，视口外则显示占位图片，那么当我们滑动的时候，如何让下面相应的图片显示呢？

其实也相当简单，在 Recommend/index.js 中:

// 引入 forceCheck 方法
import { forceCheck } from 'react-lazyload';

//scroll 组件中应用这个方法
<Scroll className="list" onScroll={forceCheck}>
...

@前端进阶之旅: 代码已经复制到剪贴板

这样随着页面滑动，下面的图片会依次显示，没有任何问题。

# 进场 loading 效果

Ajax 请求往往需要一定的时间，在这个时间内，页面会处于没有数据的状态，也就是空白状态，但是用户点击来的时候看见一片空白的时候心里是非常焦灼的，尤其是 Ajax 的请求时间长达几秒的时候，而 loading 效果便能减缓这种焦急的情绪，并且如果 loading 动画做的漂亮，还能够让人赏心悦目，让用户对 App 产生好感。

loading 的重要性不言而喻。因此，我也是这花费了不少力气，折腾出了几个版本的 loading 效果。这里先来写第一版。

主要是利用了 CSS3 的 animation-delay 特性，让两个圆交错变化，产生一个涟漪的效果。

import React from 'react';
import styled, { keyframes } from'styled-components';
import style from '../../assets/global-style';

const loading = keyframes`
  0%, 100% {
    transform: scale(0.0);
  }
  50% {
    transform: scale(1.0);
  }
`
const LoadingWrapper = styled.div`
  >div {
    position: fixed;
    z-index: 1000;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 60px;
    height: 60px;
    opacity: 0.6;
    border-radius: 50%;
    background-color: ${style ["theme-color"]};
    animation: ${loading} 1.4s infinite ease-in;
  }
  >div:nth-child (2) {
    animation-delay: -0.7s;
  }
`

function Loading ()  {
  return (
    <LoadingWrapper>
      <div></div>
      <div></div>
    </LoadingWrapper>
  );
}

export default React.memo (Loading);

@前端进阶之旅: 代码已经复制到剪贴板

现在在 Recommend 组件中引入

import Loading from '../../baseUI/loading/index';

// 在返回的 JSX 代码中
<Content>
  ...
  <Loading></Loading>
<Content>