Замените фоновое изображение GIF после загрузки - PullRequest
Новая
       30

Замените фоновое изображение GIF после загрузки

0 голосов
/ 11 сентября 2018

Я столкнулся с небольшой проблемой и, похоже, не могу найти решение.У меня есть тег раздела 

<section class="background-gif"></section>

Это просто загружает фоновое изображение 

.background-gif {
    background: url(../images/image.gif) no-repeat top;
    background-size: 100%;
}

Достаточно просто.Проблема в том, что загружаемый gif составляет 5 МБ, поскольку в нем много анимации.Это заставляет страницу загружаться очень медленно.Я не могу использовать стандартный preloader, чтобы соответствовать требованиям.

Вместо этого я подумал, что хотел бы попробовать что-то вроде этого https://medium.com/front-end-hacking/how-to-optimize-image-loading-on-your-website-855020fb41ae

Однако, моя IDE, похоже, не нравитсяэтот код, я думаю, что это ES6?Поэтому я по сути пытаюсь сделать что-то подобное.Моя мысль состоит в том, чтобы заменить вышеупомянутый CSS, чтобы он изначально отображал статическое изображение.И затем в фоновом режиме, gif может загрузить и, после загрузки, заменить статическое изображение.

Я видел примеры использования объекта изображения, что-то вроде этого Динамически заменять изображение src после страницызагружен, и изображение полностью загружено

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

Как мне заменить статический фон после полной загрузки основного GIF-файла??

Спасибо

Ответы [ 2 ]

0 голосов
/ 11 сентября 2018

Предоставив section.background-gif изображение-заполнитель (в вашем случае это может быть уменьшенное изображение из GIF изображения, которое вы хотите загрузить), и присвойте ему атрибут data-src, содержащий путь / ссылку желаемое GIF изображение, затем, используя JavaScript, мы загрузим GIF изображение на основе атрибута data-src элемента section.background-gif, а когда оно загрузится, мы присвоим его src атрибут background-image свойство элемента section.background-gif.

Вот исполняемый фрагмент, чтобы проиллюстрировать:

В этом фрагменте я использую изображение заполнителя с веб-сайта placeholder.com, которое изначально отображается в качестве фона, а затем загружаю случайное GIF изображение из Google. Фрагмент может работать не так, как ожидалось, из-за некоторых ограничений (так как фрагменты помещаются в «песочницу»), поэтому попробуйте его в своем проекте, он должен работать, только не забудьте заменить ссылки на изображения вашими. 

// referencing the section element, and creating a new Image object.
var section = document.getElementsByClassName('background-gif')[0],
    img = new Image();
// assign the data-src to the img variable src.
img.src = section.getAttribute('data-src');
// adding a 'load' event listener in which will change the section's background image when the img is loaded.
img.addEventListener('load', function() {
  // the img is loaded, assign its src attribute to the section.
  section.style.backgroundImage = 'url("' + this.src + '"';
  // just for testing, not required.
  console.log('The image has been loaded.');
});
section {
  /* just for the demo */
  height: 100vh;
}
.background-gif {
  /* change the url to your image link */
  background: url("https://via.placeholder.com/350x350") no-repeat top;
  background-size: 100%;
}
<!-- don't forget the data-src to point to the large GIF image you want to set as a background -->
<section class="background-gif" data-src="http://cosmicweb.uchicago.edu/images/mov/s02_0.gif"></section>

Надеюсь, я подтолкнул тебя дальше.

0 голосов
/ 11 сентября 2018

Вы можете попробовать предварительно загрузить изображения. Предварительная загрузка изображения как объекта позволит подключить прослушиватели событий, включая «onload». Давайте попробуем это .... 

window.addEventListener('load',init);

function init(){
var image = new Image();
image.src = 'https://images.unsplash.com/photo-1530482817083-29ae4b92ff15?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=44f4aebbd1e1371d5bf7dc22016c5d29&auto=format&fit=crop&w=700&q=60';

image.addEventListener('load',function(){
alert('image loaded');
document.body.style.background = 'url('+image.src+') no-repeat top';
});
}

Дайте мне знать, как обстоят дела с большим изображением. Мне любопытно.

...