Отзывчивый <img> тэг получения неправильного src

Question

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

Тег выглядит следующим образом:

<img 
    id="picimg" 

    src="image.jpg" 

    srcset="image-300x281.jpg 300w, 
      image-1024x961.jpg 1024w, 
      image.jpg 1664w" 

    sizes="(max-width: 499px) 92vw, 
      (min-width: 500px) 86vw, 
      (min-width: 960px) 96vw, 96vw" 
> 

Я даже попробовал этот фрагмент кода (находится по адресу: http://blog.cloudfour.com/responsive-images-101-part-2-img-required/), чтобы проверить, какие src действует каждый раз.

(function() { 
    var currentSrc, oldSrc, imgEl; 
    var showPicSrc = function() { 
    oldSrc  = currentSrc; 
    imgEl  = document.getElementById('picimg'); 
    currentSrc = imgEl.currentSrc || imgEl.src; 

    if (typeof oldSrc === 'undefined' || oldSrc !== currentSrc) { 
     document.getElementById('logger').innerHTML = currentSrc; 
    } 
    }; 

    // You may wish to debounce resize if you have performance concerns 
    window.addEventListener('resize', showPicSrc); 
    window.addEventListener('load', showPicSrc); 
})(window); 

Однако src кажется, никогда не изменится (это, кажется, всегда быть image.jpg), независимо от браузера и его ширины.

Я подозреваю, что, повторяя тот же самый по умолчанию src как последний элемент в атрибуте srcset, это может повлиять на результат. Или, может быть, определяющим фактором является размер по умолчанию (последний элемент в sizes).

Ваша помощь будет высоко оценена.

Answer 1

Кажется, что синтаксис работает правильно (он успешно протестирован на реальных мобильных браузерах).

Я просто не знаю, почему скрипт для проверки src не работал должным образом.

Благодарим всех вас за помощь.

Answer 2

Если вы начинаете с широкого окна, так что самое большое изображение является наиболее подходящим, тогда Chrome/Opera не будет загружать меньшее изображение при уменьшении окна. См. https://stackoverflow.com/a/28368483/729033