【问题标题】：How to put a pre-loader backgroud for images on ioinc 4如何在 ionic 4 上放置图像的预加载器背景
【发布时间】：2019-08-10 15:56:47
【问题描述】：

我的问题是如何在图像加载之前放置背景颜色（预加载器）？！

我正在使用ionic 4.1构建一个电子商务移动应用程序，问题是页面上的图片太多，所以当它加载时，应用程序看起来丑！

我使用ion-img 标签进行延迟加载，这甚至让事情变得更糟，加载之前的图像显示破损标记 -_- 然后正常加载！

我已经搜索过这个并找到了一个名为 ionic-image-loader 的库，所以我试了一下，不幸的是它不适用于 ionic 4！

我需要的是这样的东西！如果你打开这篇文章，我需要加载图片时的相同效果！

https://onezero.medium.com/google-just-showed-us-the-future-of-gaming-37ccec59e2dd

【问题讨论】：

标签： javascript angular ionic-framework lazy-loading ionic4

【解决方案1】：

[编辑]

所以我做了一些研究并得出了这个结果：

window.onload = function() {
  
  var placeholder = document.querySelector('.placeholder'),
      small = placeholder.querySelector('.img-small')
  
  // 1: load small image and show it
  var img = new Image();
  img.src = small.src;
  img.onload = function () {
    small.classList.add('loaded');
  };
  
  // 2: load large image
  var imgLarge = new Image();
  imgLarge.src = placeholder.dataset.large; 
  imgLarge.onload = function () {
    setTimeout(function(){ imgLarge.classList.add('loaded'); }, 2000);
  };
  placeholder.appendChild(imgLarge);
}

.placeholder {
  background-color: #f6f6f6;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
}

.placeholder img {
  position: absolute;
  opacity: 0;
  top: 0;
  left: 0;
  width: 100%;
  transition: opacity 1s linear;
}

.placeholder img.loaded {
  opacity: 1;
}

.img-small {
  filter: blur(50px);
  /* this is needed so Safari keeps sharp edges */
  transform: scale(1);
}

<html>
    <body>
        <div class="placeholder" data-large="https://cdn-images-1.medium.com/max/1800/1*sg-uLNm73whmdOgKlrQdZA.jpeg">
            <img src="https://cdn-images-1.medium.com/freeze/max/27/1*sg-uLNm73whmdOgKlrQdZA.jpeg?q=20" class="img-small">
            <div style="padding-bottom: 66.6%;"></div>
        </div>
    </body>
</html>

来源：https://jmperezperez.com/medium-image-progressive-loading-placeholder/

它是如何工作的？

很简单，您需要 2 张图片（一张非常小，一张普通的）。

这是非常小的图像（易于加载）

这是常规图片（加载时间较长）

当加载较大的图像时，javascript 会在这两个图像之间启动转换。给你！

【讨论】：

Ionic 现在有一个像这样的内置功能，称为 (ion-skeleton-text)，具有相同的动画和所有内容，我实际上使用它 我的问题只是图像需要给它一个背景当它使用 ion-img 加载时，例如 medium.com
如果你打开这篇文章你会明白我的意思看看图片是如何加载的？！onezero.medium.com/…