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

Мы можем реализовать отложенную загрузку в элемент изображения в исходных тегах. Но у нас есть только один тег img, и мы можем загрузить изображение-заполнитель отложенной загрузки в атрибут src этого тега img. Итак, если я хочу установить отдельные ленивые заполнители для каждого изображения, которое лениво загружается, есть ли способ добиться этого? Мне это нужно, потому что я хочу установить разные рамки для картинок для портативных устройств и настольных компьютеров. Скажем, одно изображение с более высоким значением высоты для портативных устройств (и будет загружено, если область просмотра меньше 1200 пикселей), а другое изображение с более высоким значением ширины для видовых экранов рабочего стола (1200 пикселей или выше). Бывший:

<picture>
    <!--[if IE 9]><video style="display: none"><![endif]-->
    <source
            data-srcset="640.jpg 640w,
                990.jpg 990w,
                1024.jpg 1024w"
            media="(max-width: 1024px)" />
    <source
            data-srcset="1200.jpg 1200w" />
<!--[if IE 9]></video><![endif]-->
<img
        src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
        data-src="1024.jpg"
        class="lazyload"
        alt="image with artdirection" />
</picture>

Код взят из afarkas.github.io.

Скажем, изображение в первом исходном теге имеет ширину 640 пикселей и высоту 900 пикселей, а изображение во втором исходном теге имеет размер 1200 пикселей в ширину и 900 пикселей в высоту. Здесь мне нужно будет загрузить различные изображения низкого качества для портативных устройств и настольных компьютеров, но я могу установить только один тег img и, следовательно, только один заполнитель изображения в его атрибуте src. Что мы можем сделать, чтобы решить эту проблему?

Заранее спасибо, Эмре


html responsive-design lazy-loading responsive-images
person Emre Baltaci    schedule 24.01.2021    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Один из способов сделать это - сделать элемент изображения внутренним, а затем управлять элементом изображения с помощью CSS и медиа-запросов.

Нравится:

picture.intrinsic {
display: block;
position: relative;
height: 0;
width: 100%;
padding-bottom: 100%; // Default to square
}
picture.intrinsic img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}

А затем добавьте медиа-запросы в .intrinsic, которые устанавливают разные отступы.

person Tokant    schedule 11.03.2021