Есть HTML код, в теге div на странице:
<div id="preloader">Загрузка... </div>
<div id="blocks" class="gallery js-flickity "
data-flickity-options='{ "wrapAround": true }'>
<div class="gallery-cell col mx-md-3 ">{% include 'block_1.html'%} </div>
<div class="gallery-cell col mx-md-3">{% include 'block_2.html'%}</div>
<div class="gallery-cell col mx-md-3">{% include 'block_3.html'%}</div>
<div class="gallery-cell col mx-md-3">{% include 'block_4.html'%}</div>
<div class="gallery-cell col mx-md-3">{% include 'block_5.html'%}</div>
<div class="gallery-cell col mx-md-3">{% include 'block_6.html'%}</div>
<div class="gallery-cell col mx-md-3">{% include 'block_7.html'%}</div>
<div class="gallery-cell col mx-md-3">{% include 'block_8.html'%}</div>
<div class="gallery-cell col mx-md-3">{% include 'block_9.html'%}</div>
<div class="gallery-cell col mx-md-3">{% include 'block_10.html'%}</div>
<div class="gallery-cell col mx-md-0"></div>
</div>
нужна реализация в JS, чтобы пока не загрузится содержимое id="blocks" оно не должно выводится, а вместо него должен в это время выводится id="preloader", после завершения загрузки id="blocks" — выводится на экран, а id="preloader" – исчезает. Это должно происходить каждый оаз при обновлении страницы.