如何在离子4上放置图像的预加载器背景

问题描述 投票：2回答：1

My question is how to put a background color ( preloader ) until the images get load?!

我正在用ionic 4.1构建一个电子商务移动应用程序，问题是它们在页面上有太多图像，因此当它加载时，应用程序看起来很难看！

我使用ion-img标签进行延迟加载巫婆甚至会在图像加载之前使图像变得更糟，显示出破坏的标记-_-然后正常加载！

我已经搜索了这个，我发现了一个名为ionic-image-loader的lib，所以我尝试了一下，不幸的是它不适用于离子4！

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

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

javascript angular ionic-framework lazy-loading ionic4
1个回答
0
投票

[编辑]

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

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个图像（一个非常小的图像和常规图像）。

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

The small one

这是常规图像（加载时间更长）

Your regular one

并且当加载较大的图像时，javascript启动这两个图像之间的转换。你去！

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.