Img не отвечает на заданные размеры srcset

Ответ 1

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

Если вы хотите, чтобы srcset переинтерпретировался при каждом событии resize страницы, вам нужно обновить его, добавив случайную переменную в конце каждого url, тогда браузер перезагрузит правильную для этого размера экрана.

Я добавил задержку к этому процессу, чтобы уменьшить количество раз его выполнения. Вы заметите, что эта практика заставляет браузер загружать правильное изображение при каждом изменении размера, и это плохо для пропускной способности. Я не рекомендую использовать эту технику, пусть браузер решает, какое изображение он использует в каждой ситуации. Я думаю, что изменение размера области просмотра не является обычной ситуацией в повседневной среде. Возможно, для ваших целей лучше использовать элемент изображения (используя некоторый подход к совместимости со старыми браузерами), как сказал @KrisD.

var img = document.getElementById("myImage");
var srcset = img.getAttribute("srcset");
var delay;

window.onresize = function() {

    clearTimeout(delay);

    delay = setTimeout(refreshImage, 500);

}

function refreshImage() {

    var reg = /([^\s]+)\s(.+)/g;
    var random = Math.floor(Math.random() * 999999);

    img.setAttribute("srcset", srcset.replace(reg, "$1?r=" + random + " $2"));

}

jsfiddle

Ответ 2

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

1-, когда вы устанавливаете значения атрибутов размеров, которые вы устанавливаете последним, а по умолчанию - 280 в качестве примера, но значение перед тем, как оно было напрямую 580, не так, как вы сделали 280

2-, когда вы используете один из фиктивных генераторов изображений, которые вы сделали слэш в конце ссылки изображения, затем пробел перед связыванием изображения с его размером, и это было переведено на сайт генератора изображений с текстом на изображении вам нужно изменить код на следующее, чтобы быть таким же, как описано в приведенной ссылке примера

<img src="https://lorempixel.com/400/200/sports/"
  alt=""
  sizes="(min-width:1420px) 610px,
         (min-width:1320px) 500px,
         (min-width:1000px) 430px,
         (min-width:620px)  580px,
         280px"
  srcset="https://lorempixel.com/620/200/sports 280w,
          https://lorempixel.com/1000/300/animals 430w,
          https://lorempixel.com/1320/400/cats 610w,
          https://lorempixel.com/1420/500/abstract 1000w,
          https://lorempixel.com/1600/600/fashion 1220w" />

Ответ 3

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

Пример

<img src="http://lorempixel.com/400/200/sports/"
      alt=""
      sizes="(min-width:1420px) 610px,
             (min-width:1320px) 500px,
             (min-width:1000px) 430px,
             (min-width:620px)  280px,
             280px"
      srcset="http://lorempixel.com/620/200/sports/ 620w,
              http://lorempixel.com/1000/300/animals/ 1000w,
              http://lorempixel.com/1320/400/cats/ 1320w,
              http://lorempixel.com/1420/500/abstract/ 1420w,
              http://lorempixel.com/1600/600/fashion/ 1600w" />

К этому вы можете просмотреть свой результат, я просто попробовал это и его работу

img {
  width: 100%;  
}

<img src="http://lorempixel.com/400/200/sports/"
      alt=""
      sizes="(min-width:1420px) 610px,
             (min-width:1320px) 500px,
             (min-width:1000px) 430px,
             (min-width:620px)  280px,
             280px"
      srcset="http://lorempixel.com/620/200/sports/ 620w,
              http://lorempixel.com/1000/300/animals/ 1000w,
              http://lorempixel.com/1320/400/cats/ 1320w,
              http://lorempixel.com/1420/500/abstract/ 1420w,
              http://lorempixel.com/1600/600/fashion/ 1600w" />