Автор оригинала: Andrew Wong.

Мы живем в очень конкурентном мире. Как мы все знаем, просто хорошая идея недостаточно, чтобы сделать вашу компанию в следующем миллиарде доллара IPO – исполнение – это экстремальное значение. Когда дело доходит до вашего продукта, это сводится к одному фактору – Пользовательский опыт Отказ

Пользовательский опыт намного больше, чем как ваш продукт выглядит эстетически. Это также о том, насколько это исполнительно и насколько это интуитивно понятно – по сути, о том, сколько это Расти Ваш пользователь.

Мы все были там – впервые открывая новое приложение или веб-страницу и видим что-то вроде этого:

С фотографиями с высоким разрешением и экранами сетчатки, слишком часто мы должны сидеть и смотреть изображения, кропотливо визуализировать. Обычно можно увидеть изображение, медленно визуализацию сверху вниз.

Эта проблема может быть решена.

Первые 2 очевидных оптимизации должны использовать CDN и использовать кэширование (ваш браузер автоматически делает это), чтобы загружать изображения быстрее. Тем не менее, мы также можем трюк Восприятие нашего пользователя времени загрузки, которое приводит к общему положительному увеличению пользовательского опыта.

Вот 2 трюки, которые мы можем использовать для улучшения наших UX на богатых медиа-приложениям:

1. Используйте заполнителю:

Заполнитель – это современный поворот на классической загрузке спиннера. Вместо того, чтобы использовать универсальный спиннер, чтобы указать, что приложение загружается, мы используем заполнитель, который связывается пользователю, какой тип контента загружается – изображения.

Facebook и LinkedIn являются хорошими примерами, которые используют эту технику для улучшения их UX.

2. Динамически добавление изображений в DOM:

Вторая оптимизация должна полностью загрузить наши изображения, прежде чем показывать их на экране. Это позволит избежать классической рендеринга в верхнем до Ниже, мы привыкли видеть, как они загружаются. Мы можем достичь этого с помощью Rection oepload Событие – мы можем сделать запрос на сервер для файлов изображений, но не отображать изображение в DOM, пока весь файл не будет загружен.

Конечный результат – это приложение, которое загружает изображения высокого разрешения и никогда не сохраняет ожидание пользователя. Заполнитель дразнить Пользователи и дают им знать, что изображения загружаются. Кроме того, мы удерживаемся при рендеринге изображений, пока они не будут полностью загружены с сервера, поэтому наш пользователь никогда не должен видеть картины изображения сверху вниз в своем браузере.

Вы можете Посмотреть живую демонстрацию здесь Отказ

Покажите мне код!

Рендеринг заполнителя

Для нашего компонента заполнителя ( PlaceItem в этом примере) мы просто визуализируем изображение и применяем любые эффекты анимации, которые мы хотим:

export default function () {
  return (
    
      
    
  )
}

В визуализации нашего компонента подачи мы просто визуализируем Загранично Пока у нас еще есть Кормилирует Будучи загружены:

export default class Feed extends Component {
  ...
  render() {
    return (
      

        ...
        {this.props.items.length > this.state.loadedItems.length &&
          
        }
        ...
      
    )
  }
}

Динамически рендеринг изображений через onload

Наше Кормить Компонент работает следующим образом:

export default class Feed extends Component {
  constructor(props) {
    super(props)
    this.state = { loadedItems: [] }
  }
  onLoad(feedItem) {
    let updatedItems = this.state.loadedItems
    updatedItems.push({ 
      name: feedItem.name, 
      imgPath: feedItem.imgPath 
    })
    this.setState({ loadedItems: updatedItems })
  }
render() {
    return (
      

        
{this.props.name}
        {this.state.loadedItems.map((item, i) =>
          
        )}
        {this.props.items.length > this.state.loadedItems.length &&
          
        }
        

          {this.props.items.map((item, i) =>
            
          )}
        
      
    )
  }
}

Так что здесь происходит? У нас есть скрытая

Это оно! Вот еще некоторые ресурсы:

• Просмотр живой демонстрации
• Просмотр полного исходного кода (Звезда репо, если вы нашли это полезным!)
• Успешный UX Design: принимать интуитивные решения для пользователей
• 7 Пользовательский опыт дизайна Советы для лучшего развития веб-разработки