如何将预加载器添加到页面中的每个部分/div

Question

我在codepen 上发现了一个 sn-p，它添加了一个加载器，直到内容完全加载。

// 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 框添加一个加载器，而不是向整个页面添加一个加载器？

我看到另一个参考 here 我正在努力实施和 here is how far I got with my codepen。

Answer 1

关于这个的事情是，你的例子使用了窗口的加载事件。当你想要一个 div 的微调器时，你必须定义 div 在什么条件下“准备好”并且微调器应该淡出。 渲染的时候准备好了吗？加载完所有资源是否准备就绪？

更简单的方法是将微调器添加到图像中。所以在 src 属性中给出你的 img 标签，例如。一个 spinner.gif 并向标签添加一个 data-src 属性。

<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;

所有这些都是在所有具有 data-src 属性的 img 标签上循环完成的。

您的 DIV 示例的另一种方法是通过 ajax 加载 div 的内容，然后只加载一个虚拟内容，例如：

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

然后将 div 的内容替换为从 data-load 属性加载的 html。