Как я могу предварительно загрузить правильное количество изображений в зависимости от размера экрана?

Question

Я работаю над оптимизацией самой большой Contentful Paint (LCP), но у меня возникают проблемы с предварительной загрузкой правильного количества изображений-кандидатов LCP в зависимости от размера устройства.

Проблема:

• на маленьких экранах одно изображение отображается в виде карусели
• на больших экранах можно показывать до четырех изображений
• Я не могу контролировать размер указанных изображений, что означает, что любой может быть кандидатом LCP.
• загрузка всех четырех изображений на небольшие устройства - бесполезная задача: трата пропускной способности и снижение производительности.

Желаемое решение:

• предварительно загрузить только одно изображение на маленьких экранах
• предварительно загрузить все четыре изображения на большие устройства

Мое первое, хотя и очевидное, использовало эльфы. mediaатрибут, чтобы решить, что загружать; однако все ресурсы все равно загружаются (ссылки 1, 2).

Я не поклонник моего лучшего «решения» для этого: использование linkс imagesrcset + imagesizes атрибуты для загрузки первого изображения независимо, а последние изображения размером 1px на 1px на небольших устройствах.

НАПРИМЕР

      <link 
  rel="preload" 
  as="image" 
  href="image1" 
  imagesrcset="image1-small 100w 200h,image1-large 200w 400h" 
  imagesizes="(max-width: 40em) 100vw, 400px"
>

<link 
  rel="preload" 
  as="image" 
  href="image2" 
  imagesrcset="image2-tiny 1w 1h, image2-small 100w 200h,image2-large 200w 400h" 
  imagesizes="(max-width: 40em) 1px, 400px"
>

Явно очень хакерский. Есть ли «правильный» способ сделать это? Я что-то пропустил?

Answer 1

Итак, оказывается, что с помощью media атрибут для link Эль из type="image" действительно работает.

Урок научился всегда проверять то, что читаю :)

Поэтому для решения данной проблемы необходимо выполнить следующие действия:

      <link 
  rel="preload" 
  as="image" 
  href="image1" 
  imagesrcset="image1-small 100w 200h, image1-large 200w 400h" 
  imagesizes="(max-width: 40em) 100vw, 400px"
>

<link 
  rel="preload" 
  as="image" 
  href="image2" 
  imagesrcset="image2-small 100w 200h, image2-large 200w 400h" 
  imagesizes="400px"
  media="(min-width: 40em)"
>

Answer 2

Вы пытались изобретать колеса, чтобы создать адаптивную сеточную систему Bootstrap :). Это большое нет-нет. Я предлагаю остаться с толпой и использовать Bootstrap. Вот ответ:

• Загрузите и установите node.js с https://nodejs.org/
• Проверка правильности установки: ⦁ Откройте окно терминала на своем компьютере, введите:

      node -v
npm -v

• Затем перейдите в ПАПКУ ВАШЕГО ПРОЕКТА, в окне cmd введите:

      npm install
npm install jquery popper.js --save
npm install bootstrap --save
npm init

• В файле index.html вставьте эти коды в:

      <!-- Required meta tags always come first -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge"> 
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">

• Вставьте в файл index.html непосредственно перед концом тела, то есть непосредственно перед тегом:

      <!-- jQuery first, then Popper.js, then Bootstrap JS. -->
    <script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
    <script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>

Теперь вот ваш код для управления внешним видом изображений на экране разного размера. Я написал его для 1 ряда из 4 изображений. Если более 1 строки, скопируйте и вставьте раздел столько раз, сколько нужно. В строке будет отображаться 4, затем 2, а затем 1 изображение, когда размеры экрана изменяются от компьютера к планшету или мобильному устройству прибл.

      <div class="container">
    <div class="row">
        <div id="img-1" class="col-12 col-sm-6 col-md-3 mb-2">
             <img width="100%" src="#"/>
        </div>
        <div id="img-2" class="col-12 col-sm-6 col-md-3 mb-2">
             <img width="100%" src="#"/>
        </div>
        <div id="img-3" class="col-12 col-sm-6 col-md-3 mb-2">
             <img width="100%" src="#"/>
        </div>
        <div id="img-4" class="col-12 col-sm-6 col-md-3 mb-2">
             <img width="100%" src="#"/>
        </div>
</div>