Загрузка больших изображений с помощью сопряжения JavaScript с медиа-запросами

Question

Я смотрел на статью PPK здесь как, возможно, более эффективный способ загрузки правильных изображений при использовании медиа-запросов. Основным способом, который он предлагает для загрузки, является соединение JS с CSS. Таким образом, код будет выглядеть так:

@media all and (max-width: 900px) {
// styles go here for screen widths less than 900px wide
}

if (document.documentElement.clientWidth < 900) {
// script to load the images goes here for screen widths less than 900px wide
} 

Что я пытаюсь выяснить, так это лучший способ загрузки изображений? Это старый способ использования нового Image () в skool или добавление вещей с помощью jQuery? Есть ли один, который меньше нагрузки на сервер, чем другой?

Спасибо за преимущество ...

Answer 1

Серверная нагрузка? В любом случае вы предоставляете данные изображения, и способов сделать это не так уж много. Вы просто делаете запрос для каждого изображения и сервер отвечает. Лучшее, что вы можете сделать, - убедиться, что изображения обслуживаются с правильными Cache-Control заголовками.

var img = new Image();
img.onload = function() {
  alert('woot');
};
img.src = url;

Это просто, легко сделать в цикле и может обрабатывать обратные вызовы, когда они сделаны.