Как добавить preloader в каждый раздел / div на странице

Question

Я нашел фрагмент на codepen , который добавляет загрузчик до полной загрузки содержимого.

// makes sure the whole site is loaded
	jQuery(window).load(function() {
        // will first fade out the loading animation
    jQuery("#status").fadeOut();
        // will fade out the whole DIV that covers the website.
    jQuery("#preloader").delay(1000).fadeOut("slow");
  
})

#preloader  {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background-color: #fff;
     z-index: 99;
    height: 100%;
 }

#status  {
     width: 200px;
     height: 200px;
     position: absolute;
     left: 50%;
     top: 50%;
     background-image: url(http://opengraphicdesign.com/wp-content/uploads/2009/01/loader64.gif);
     background-repeat: no-repeat;
     background-position: center;
     margin: -100px 0 0 -100px;
 }

.flex {
  display: flex;
  width: 100%;
}

.flex > div {
  height: 200px;
  width: 50%;
  position: relative;
}

.left {
  background: red;
}

.right {
  background: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div id="preloader">
  <div id="status"></div>
</div>

<img src="##">

<div class="flex">
  <div class="left"></div>
  <div class="right"></div>
</div>

Вместо того, чтобы добавлять один загрузчик на всю страницу, как я могу добавить загрузчик в каждый блок div?

Я видел другая ссылка здесь , которую я изо всех сил пытаюсь реализовать, а - вот как далеко я продвинулся с моим кодовым пером .

Answer 1

Дело в том, что в вашем примере используется событие загрузки окна. Если вы хотите иметь счетчик для div, вам нужно будет определить, при каких условиях div «готов», и счетчик должен исчезнуть. Это готово, когда это предоставлено? Готово ли это, когда все ресурсы загружены?

Немного проще было бы просто добавить спиннер к изображениям. Так что дайте ваши теги img в атрибуте sr c, например. spinner.gif и добавьте к тегу атрибут data-sr c.

<img src="spinner.gif" data-src="your-picture-to-be-loaded.jpg">

Затем вы можете начать загрузку изображения с помощью javascript и заменить спиннер загруженным изображением. Для этого вы можете использовать новый объект Image:

var img = document.createElement('img');
$(img).on('load', function() {
  imgTag.src = img.src;
});
img.src = data-src-value-of-your-img-tag;

Все это сделано в al oop над всеми тегами img, которые имеют атрибут data-sr c.

Другой подход для вашего DIV-примера было бы загрузить содержимое div через ajax и просто загрузить фиктивное содержимое, например:

<div data-load="/some-html-to-be-rendered.html">
    <img src="spinner.gif" alt="loading">
</div>

, а затем заменить содержимое div на загруженный html из ваш атрибут загрузки данных.