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

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

    <img src="/media/1062/lg.png" alt="Fresh from garden" class="visible-lg">
    <img src="/media/1062/lg.png" alt="Fresh from garden" class="visible-md">
    <img src="/media/1062/lg.png" alt="Fresh from garden" class="visible-sm">
    <img src="/media/1062/lg.png" alt="Fresh from garden" class="visible-xs">

загружает все изображения независимо от устройства и делает страницу более тяжелой для мобильных устройств. Я использую razor cshtml и ищу лучший способ реализовать это.

Любые предложения?

3 голоса | спросил Sangeeta 12 FebruaryEurope/MoscowbSun, 12 Feb 2017 21:49:46 +0300000000pmSun, 12 Feb 2017 21:49:46 +030017 2017, 21:49:46

1 ответ


2

В любом случае вы не захотите использовать мультимедийные запросы на основе CSS, поскольку браузеры загружают все эти изображения независимо от того, отображаются ли они или скрыты. Вы можете добиться того, что хотите, используя разметку HTML5 или Javascript.

Вот несколько методов, которые должны вас запустить:

ответил Simon Hayter 12 FebruaryEurope/MoscowbSun, 12 Feb 2017 22:51:00 +0300000000pmSun, 12 Feb 2017 22:51:00 +030017 2017, 22:51:00

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132