Modernizr: удаление элемента с .webp в фоновом режиме, если не поддерживается - PullRequest
Новая
       37

Modernizr: удаление элемента с .webp в фоновом режиме, если не поддерживается

0 голосов
/ 28 мая 2020

У меня есть простой код, в котором я использую Modernizr. js, который может помочь мне определить, поддерживается ли .webp в браузере пользователя.

Я использую этот код в <head> раздел, который может гарантировать мне загрузку перед другими скриптами.

У меня есть 2 одинаковых html элемента, и один из них использует .webp в фоновом режиме, второй .jpg.

Теперь мне нужно modernizr. js определит, обнаружен ли .webp, и скроет элемент с фоном .jpg. И переключите его.

На данный момент мой Javascript не удаляет элемент html с фоном webp, когда webp не поддерживается.

Есть ли какое-нибудь решение, как это исправить, или я использую правильно?

МОЙ КОД: 

Modernizr.on('webp', function(result) {
  if (result) {
    document.getElementsByClassName("no-webp").remove();
  } else {
    document.getElementsByClassName("webp").remove();
  }
});
section {
  height: 200px;
  width: 200px;
}

section.webp {
  background: url('http://superweb.online/assets/img/mainbg.webp') no-repeat;
  background-size: cover;
}

section.no-webp {
  background: url('http://superweb.online/assets/img/mainbg.jpg') no-repeat;
  background-size: cover;
}
<script src="http://superweb.online/assets/js/modernizr-custom.js"></script>
<section class="webp"></section>
<section class="no-webp"></section>
...