【Rails】코피페로 할 수 있다! Ajax 로딩 구현

소개

Ajax에서 로딩을 구현하고 싶다는 것은 종종 있다고 생각합니다.
하지만 로딩 이미지를 찾거나 어떤 코드를 쓰면 좋은지 조금 헤매는 것도 사실.
그래서 비망록적으로 정리해 두기로 했습니다.
Rails(Slim, Sass, CoffeeScript)로 이용했습니다만, 다른 곳에서도 문제 없게 사용할 수 있을까 생각합니다.

개요

다음 단계를 수행합니다.

Ajax 통신 중에 로딩 문장이 나오는지 확인 (JS)

로딩 gif 준비 파셜로 잘라

CSS 구현

Ajax 통신중은 페이지의 상하 좌우 중앙에 로딩gif가 나오는 이미지입니다.

1. Ajax 통신 중에 loading 문언이 나오는 것을 확인 (JS)

Slim에서 다음을 작성합니다.
장소는 어디서나 좋지만 레이아웃 파일에 쓰기로합시다.

.loading.js-loading | loading

그런 다음 CoffeeScript에 다음을 씁니다.

$ ->

  speed = 300
  $loading = $('.js-loading')

  # Ajax ローディング
  $(document)
    .on 'ajaxSend', ->
      $loading.show()
    .on 'ajaxComplete', ->
      $loading.fadeOut speed

※ speed는 기호로 OK. Ajax 처리중은 로딩을 표시, 종료하면 페이드로 사라져 간다는 느낌이군요.

2. 로딩 gif 준비 파셜로 잘라내기

글쎄, 이것만으로는 끝이 없네요. (문언 표시하고 있을 뿐이므로…)
Ajax라고 하면, 빙글빙글 로딩 화상이지요. 그래서 찾습니다.

이번에는

h tp // p ぉ 아데 rs. 네 t/ 에서 Floating rays 를 선택하세요.



화상, 배경색, 사이즈나 스피드 등 여러가지 바뀔 수 있으므로 요건에 따라 바꾸자.



변경하면 다운로드 한 후,

assets/images 다음 공통 디렉토리에 loading.gif를 넣습니다.

Slim의 코드는 다음과 같은 느낌으로.

.loading
  = image_tag('common/icons/loading.gif', class: 'img')

그리고 이것을 그대로 부분으로 자릅니다.

이번에는 여러 곳에서 사용한다고 가정하여 views/partials/_loading.html.slim에 추가했습니다.

3. CSS 구현

그리고는 외형을 정돈할 뿐입니다.

SMACSS에서의 사용을 가정하고 assets/stylesheets/module 아래에 _loading.sass를 만듭니다.
loading 이미지의 크기는 64px x 64px를 가정합니다.

_loading.sass

.loading
  display: none // はじめは非表示
  height: 100%
  width: 100%
  z-index: 1000
   > .img
    $loading_negative_margin: -32px
    left: 0
    margin:
      top: $loading_negative_margin
      left: $loading_negative_margin
    position: fixed
    top: 0    

이것으로 페이지의 상하 좌우 중앙에 로딩 화상이 나오게 되었을까 생각합니다.

끝에

로딩 이미지를 구현하는 것만으로 UX는 상당히 향상될 것이라고 생각합니다.
공수도 거기까지 걸리지 않기 때문에, 빨리 실장해 보는 것은 어떻습니까.
도움이되면 다행입니다!

기타 참고

special thanks!