Фоновое изображение с отступлением WebP и data-src - PullRequest
Новая
       79

Фоновое изображение с отступлением WebP и data-src

0 голосов
/ 27 января 2019

Итак, я занимаюсь оптимизацией на своем веб-сайте, чтобы улучшить оценки Page Insights. Я могу обратиться к двум пунктам: -

  • Служить изображениям в форматах следующего поколения
  • Отложите закадровые изображения

Поэтому изображения в форматах следующего поколения я решил использовать WebP, но мне нужно включить запасные варианты, чтобы они работали во всех браузерах / устройствах.

Отложить закадровые изображения;Я использую data-src с небольшим количеством JS-скрипта, чтобы установить фоновое изображение в качестве data-src, JS заменяет исходный SRC, который является src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="

. В качестве примера рассмотрим приведенное ниже.использовать встроенное фоновое изображение с WebP с отступлениями во время отсрочки закадровых изображений?

HTML 

<div id="working-bg" class="parallax" data-src="/wp-content/uploads/2016/08/silva-planning-parralax.jpg" style="background-image: url(/wp-content/uploads/2016/08/silva-planning-parralax.jpg)"></div>

JS для data-src 

<script>
function init() {
    var imgDefer = document.getElementsByTagName('img');
    for (var i=0; i<imgDefer.length; i++) {
    if(imgDefer[i].getAttribute('data-src')) {
        imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('data-src'));
    } }

    var imgDeferSpan = document.querySelectorAll('span[data-src]');
    var styleSpan = "background-image: url({url})";
    for (var i = 0; i < imgDeferSpan.length; i++) {
        imgDeferSpan[i].setAttribute('style', styleSpan.replace("{url}", imgDeferSpan[i].getAttribute('data-src')));
    }

    var imgDeferDiv = document.querySelectorAll('div[data-src]');
    var styleDiv = "background-image: url({url})";
    for (var i = 0; i < imgDeferDiv.length; i++) {
        imgDeferDiv[i].setAttribute('style', styleDiv.replace("{url}", imgDeferDiv[i].getAttribute('data-src')));
    }

}

window.onload = init;

</script>

Заранее спасибо!

1 Ответ

0 голосов
/ 28 февраля 2019

Служите изображениям в формате следующего поколения: используйте CDN с изображением, например, imagekit.io, и сделайте это автоматически.Большинство CDN с изображениями имеют бесплатный план, который отлично подходит для тестирования и небольших сайтов.

Отложите закадровые изображения: используйте готовое решение, такое как lozad.js, которое заботится как об изображениях, так и фоновых изображениях.Для background-image вы можете пропустить установку начального встроенного стиля, так как размер элемента установлен и не будет вызывать перекомпоновку при загрузке изображения.Для <img> s используйте пустое <svg> в качестве начального значения src, где 6 9 в viewBox ниже определяет соотношение между шириной (6) и высотой (9) => измените эти значения в соответствии с вашим контекстом. 

data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 9'%3E%3C/svg%3E

Обратите внимание, что в lozad.js используется API Intersection Observer, в котором по-прежнему отсутствует поддержка браузера, поэтому обязательно добавьте полифилл.

Удачи!

...