WebWorkerでプリロード

load.coffee

@onmessage = (event) ->

  # 元スレッドからURLのリストを受け取る
  urls = event.data
  count = 0

  load = (url) ->
    xhr = new XMLHttpRequest()

    xhr.onreadystatechange = ->
      try
        if xhr.readyState is 4
          count++

          if count < urls.length
            # 1つ読み込みが終わった通知
            postMessage("next")
          else
            # すべて読み込みが終わった通知
            postMessage("end")
      catch e
      return

    xhr.open("GET", url, false)
    xhr.send(null)
    return

  for val in urls then load(val)

  return

main.coffee

define ["Preloader"], (Preloader) ->

  urls = [
    "/assets/images/1.gif"
    "/assets/images/2.gif"
    "/assets/images/3.gif"
    "/assets/images/4.gif"
  ]

  preloader = new Preloader()
  preloader.start urls

Preloader.coffee

define ->

  class Preloader

    # Workerで実行する処理が書かれた外部ファイル
    WORKER_CORE_JS: "load.js"
    count: 0

    constructor: ->
      # ブラウザにWebWorkerが実装されてるかチェック
      @enableWorker = !!window.Worker
      return

    start: (urls) =>
      @urls = urls
      @total = @urls.length

      if @total isnt 0
        if @enableWorker
          # Workerが使えたらWorkerにロードの処理を投げる
          @loadWithWorker(@urls)
        else
          # Workerが使えなかったら今のスレッドでロードする
          for val in @urls then @loadWithXHR(val)
      return

    loadWithWorker: (urls) =>
      @worker = new Worker(@WORKER_CORE_JS)
      # Workerから受信する関数を設定
      @worker.onmessage = @workerHandler
      # WorkerにURLのリストを送りつつ実行
      @worker.postMessage(@urls)
      return

    # Worker内でファイルが読み込まれるごとに呼び出されるコールバック関数
    workerHandler: (e) =>
      switch e.data
        when "end"
          # Workerを停止
          @worker.terminate()
          @loadComplete()
        when "next"
          @loadComplete()
      return

    loadWithXHR: (url) =>
      @xhr = new XMLHttpRequest()
      @xhr.open("GET", url, false)
      @xhr.onreadystatechange = (data) =>
        if @xhr.readyState is 4 then @loadComplete()
      @xhr.send(null)
      return

    loadComplete: =>
      @count++
      if @count >= @total then console.log "全部読み込み終わった"
      return