Как не загружать изображения для экрана меньшего размера

Question

Я столкнулся с многочисленными решениями из разных статей, но какой из них бы поставил наименьшее напряжение на процессор? Существует https://scottjehl.github.io/picturefill/ https://github.com/teleject/hisrc , но какой из них рекомендуется и имеет лучшую совместимость с браузерами?

Answer 1

Это зависит от того, что вы планируете делать. Если вы не хотите, чтобы элементы имели фоновое изображение, если размер экрана слишком мал, вы можете использовать медиа-запросы, например.

@media screen and (max-width: 300px) { 
    body{ 
      background-image: none; 
     } 
    } 
} 
@media screen and (min-width: 301px) { 
    body{ 
      background-image: url("/url/to/image.jpeg"); 
     } 
    } 
} 

Но если вы хотите контролировать, загружаются ли источник определенным образом тега вы можете сделать это:

if(screen.width > 300) image.src = "/url/to/image.jpeg"; 

С другой стороны, можно просто скрыть тег изображения, используя те же медиазапросы

Answer 2

Используйте css @media для определения ширины экрана, чтобы контролировать, загружать или не загружать изображение.

@media screen and (max-width: 400px) { 
    img { 
     display: none; 
    }; 
} 

или использовать javascript.

$(document).ready(function(){ 
    if (screen.width <= 400px) { 
     $("img").css('display', 'none'); 
    } 
    } 
);