如何在实际加载之前显示我的对象正在加载？

Question

我目前有这个：

{
  "took": 1,
  "timed_out": false,
  "_shards": {
    "total": 5,
    "successful": 5,
    "failed": 0
  },
  "hits": {
    "total": 1,
    "max_score": 0,
    "hits": []
  },
  "aggregations": {
    "Nesting": {
      "doc_count": 4,
      "keyword_names": {
        "doc_count_error_upper_bound": 0,
        "sum_other_doc_count": 0,
        "buckets": [
          {
            "key": "rahmengrosse",
            "doc_count": 3,
            "keyword_values": {
              "doc_count_error_upper_bound": 0,
              "sum_other_doc_count": 0,
              "buckets": [
                {
                  "key": "33,5 cm",
                  "doc_count": 1
                },
                {
                  "key": "39,5 cm",
                  "doc_count": 1
                },
                {
                  "key": "45,5 cm",
                  "doc_count": 1
                }
              ]
            }
          },
          {
            "key": "color",
            "doc_count": 1,
            "keyword_values": {
              "doc_count_error_upper_bound": 0,
              "sum_other_doc_count": 0,
              "buckets": [
                {
                  "key": "gelb",
                  "doc_count": 1
                }
              ]
            }
          }
        ]
      }
    }
  }
}

但问题是，当页面未完全加载时，我的$(window).load -> $('#image-gallery').lightSlider gallery: true item: 1 thumbItem: 7 slideMargin: 0 loop: true 正在加载错误的位置。完全加载页面后，滑块会自行修复。

如何确保首先显示我的加载程序图像，然后在滑块准备就绪后加载此代码段？

修改

抱歉，我的意思是我想在显示图像之前显示加载的gif

lightSlider

所以我在展示#pre-loading = image_tag "ajax-loader.gif" %ul#image-gallery - @go.go_images.each do |image| %li{ data: { thumb: image.photo_url(:small), src: image.photo_url(:small)} } = image_tag image.photo_url(:large) 之前尝试展示#pre-loading div。我的coffeescript是正确的，但问题是滑块加载速度太快，加载时它不在正确的位置。我想要隐藏滑块，显示预加载器，以及在整个页面完全加载完毕后滑块完全加载，然后显示滑块。