суббота, 20 июня 2015 г.

Rails preload screen

Пилим паршиал . В нем пишем css-свойства будущего прелоад скрина, в том числе и путь до гифки

views/shared/_preloader.slim

#loading style='top: 0; height: 100%; width: 100%;position: fixed; 
background: #1C2126 no-repeat center center ;
background-image: url("#{image_path('liquid-bubbles.gif')}");
z-index: 2000000; transition: all 0.3s linear; opacity: 1'on'


Немного кофе %)

assets/javascripts/preloader.coffee

is_old_ie = !window.addEventListenerload_event = if is_old_ie then 'onload' else 'load'

bind = (event, callback) ->
  if is_old_ie    if event == load_event      window.attachEvent event, callback
    else
      document.attachEvent event, callback
  else
    if event == load_event      window.onload = callback
    else
      document.addEventListener event, callback, false

bind load_event, ->
  $_spinner = $('#loading')
  $_spinner.css('opacity', '0')
  setTimeout ->
      $_spinner.css 'display', 'none'
    , 400


подключаем наш паршиал в 


views/layouts/application.slim 

И в остальных лэйаутах, если есть.

doctype html
html  head    title SomeTitle
    = javascript_include_tag 'preloader'   
    meta name='viewport' content='width=device-width, initial-scale=1'
    = csrf_meta_tags
    = favicon_link_tag 'favicon.ico'
  body    = render 'shared/preloader'


И добавляем в config/initializers/assets.rb

Rails.application.config.assets.precompile += %w( 
preloader.js
)

Все, наш прелоад скрин готов.

Перезагрузка сервера обязательна!