Django中CSS未生效及预加载器异常问题求助

刚学完Django文档，正在部署网站，遇到两个问题：

• 修改CSS（如调整颜色）后页面无任何变化，尽管已将所有样式表链接至HTML模板
• 预加载器一直处于旋转状态无法正常隐藏；删除预加载器的JS代码或HTML元素后，页面会完全变黑

相关文件及目录 #

目录结构 #

[目录结构图片]

HTML模板头部代码 #

<link rel="stylesheet" href="{% static 'css/basic.css' %}" />
<link rel="stylesheet" href="{% static 'css/layout.css' %}" />
<link rel="stylesheet" href="{% static 'css/blogs.css' %}" />
<link rel="stylesheet" href="{% static 'css/line-awesome.css' %}" />
<link rel="stylesheet" href="{% static 'css/magnific-popup.css' %}" />
<link rel="stylesheet" href="{% static 'css/animate.css' %}" />
<link rel="stylesheet" href="{% static 'css/simplebar.css' %}" />

views.py代码 #

def home(request):
    return render(request, "index.html")

settings.py代码 #

STATIC_URL = 'static/'
STATICFILES_DIR = [
    path.join(BASE_DIR, 'static'),
]
STATIC_ROOT = path.join(BASE_DIR, 'static')

预加载器HTML代码 #

<div class="preloader">
   <div class="centrize full-width">
      <div class="vertical-center">
         <div class="spinner">
            <div class="double-bounce1"></div>
            <div class="double-bounce2"></div>
         </div>
      </div>
   </div>
</div>

预加载器JS代码 #

$(window).on("load", function() {
   var preload = $('.preloader');
   var lines = $('.lines-grid');
   preload.find('.spinner').fadeOut(function(){
      preload.fadeOut();
      lines.addClass('loaded');
   });
});

内容的提问来源于stack exchange，提问作者Kiarash Mafi