Javascript 如何加载gif直到显示图形

我希望在加载图形之前加载我的gif，然后将其隐藏。因此，我尝试使用以下命令，但效果不理想（gif正在显示，但在加载图形之后）。下面是我的代码：

    <div id='chartwrapper'>
    <div class='chartcurtain' style='height: 427px; width: 100%; position: absolute; top: 0; text-align: center; line-height: 300px; font-size: 20px;'>


    </div>

    </div>

但是现在最初gif在那里，但在那之后gif消失了，直到下一个图形才出现 欢迎光临。任何帮助都将不胜感激

var img_load=$('#img-load');
      $(img_load).show();

及

---

耍了个小把戏，很有魅力。希望对任何人都有帮助。

@MohammadFaisal这就是你想要的吗？@AminurRashid是的我的图表properly@AminurRashid我更新了这个问题。你现在能帮我吗？下次加载数据时，它应该会再次出现。（每次加载数据都应该出现在屏幕上）
"listeners": [{
            "event": "rendered",
            "method": function(e) {
              var img_load = document.getElementById("img-load");
              img_load.parentElement.removeChild(curtain);
            }
      }],

var img_load=$('#img-load');
      $(img_load).show();

"listeners": [{
            "event": "drawn",
            "method": function(e) {
              //var img_load = document.getElementById("img-load");
              var img_load=$('#img-load');
              $(img_load).hide();
            }
          }