在加载多个内容的div之前显示加载图像

Question

我正在尝试在加载高图的div之前显示加载图像。

这是我要加载的图片：

<script type="text/javascript">
    $(".content").on('load', function(){
  $(".preload img").fadeOut(200, function(){
    $(".content").fadeIn(10000)
  })
});
</script>

这是div与highcharts：

heroku certs:auto:enable

我的jQuery：

➜  ExamPleGit.clean git:(master) heroku certs:auto
=== Automatic Certificate Management is enabled on example

Certificate details:
Common Name(s): www.example.io
Expires At:     2018-01-22 15:04 UTC
Issuer:         /C=US/O=Let's Encrypt/CN=Let's Encrypt Authority X3
Starts At:      2017-10-24 15:04 UTC
Subject:        /CN=www.example.io
SSL certificate is verified by a root authority.

Domain          Status
──────────────  ────────────
www.example.io  DNS Verified
example.io      Failing

=== Some domains are failing validation, please verify that your DNS matches: heroku domains
➜  ExamPleGit.clean git:(master) heroku domains
=== example Heroku Domain
example.herokuapp.com

=== example Custom Domains
Domain Name     DNS Record Type  DNS Target
──────────────  ───────────────  ────────────────────────────
www.example.io  CNAME            www.example.io.herokudns.com
example.io      ALIAS or ANAME   example.io.herokudns.com

但事实并非如此。显示图像并且加载gif正在旋转，之后加载内容并且图像没有淡出...它仍然高于高图