Вопрос оптимизации изображения, грузить ту область что видно, остальное не грузить, как реализовать?

Здорова ребята.

Столкнулся с вопросом оптимизации картинок, я не про размер ее, а об подгрузке видимой части.
Сайты адаптивные, и не везде грузиться вся картинка, как сделать чтобы грузилась только та часть которую видно.

Для мобильных устройств есть скрипт, который определяет с мобилы я зашел или компа, и подгружает мобильную картинку или обычную.
function check_mobile_device() { 
    $mobile_agent_array = array('ipad', 'iphone', 'android', 'pocket', 'palm', 'windows ce', 'windowsce', 'cellphone', 'opera mobi', 'ipod', 'small', 'sharp', 'sonyericsson', 'symbian', 'opera mini', 'nokia', 'htc_', 'samsung', 'motorola', 'smartphone', 'blackberry', 'playstation portable', 'tablet browser');
    $agent = strtolower($_SERVER['HTTP_USER_AGENT']);    
    // var_dump($agent);exit;
    foreach ($mobile_agent_array as $value) {    
        if (strpos($agent, $value) !== false) return true;   
    }       
    return false; 
}

а как на фронте оборачивать 2 картинки, одна для компа, другая для мобилы.

Вроде как есть скрипт, который будет подгружать видимую часть картинки, а остальное не грузить. И стоит ли использовать такой скрипт?
  • Вопрос задан
  • 71 просмотр
Пригласить эксперта
Ответы на вопрос 1
DanArst
@DanArst Куратор тега JavaScript
Гриффиндор в моде при любой погоде!
Если вопрос стоит в плане оптимизации, то почему бы не использовать lazyload или Intersection Observer API чтобы картинки подгружались только тогда, когда она входят в область просмотра?
Либо, если у вас разные картинки для разных типов устройств, то можете использовать Picturefill
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

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