Как поставить предзагрузчик Backgroud для изображений на ioinc 4 - PullRequest
Новая
       22

Как поставить предзагрузчик Backgroud для изображений на ioinc 4

2 голосов
/ 20 марта 2019

У меня вопрос как поставить цвет фона (предзагрузчик), пока изображения не загрузятся?!

Я создаю мобильное приложение для электронной коммерции с ionic 4.1, проблема в том, что на странице слишком много изображений, поэтому при загрузке приложение выглядит безобразно !

Я использую ion-img тег для отложенная загрузка , что даже ухудшает качество изображений перед загрузкой, показывает сломанную отметку -_-, затем загружается как обычно!

Я искал это и нашел библиотеку с именем ionic-image-loader, поэтому я попробую, и она не работает с ionic 4, к сожалению!

Мне нужно что-то вроде этого! если вы откроете эту статью, мне понадобится тот же эффект, что и на изображениях при загрузке!

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

1 Ответ

0 голосов
/ 20 марта 2019

[ EDIT ]

Итак, я провел несколько исследований и пришел с таким результатом: 

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 запускает переход между этими двумя изображениями, когда загружается большее. Вот и все!

...