Можно ли пересчитать образ `srcset`, используемый при изменении размера окна браузера?

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

Причина, по которой вы хотите это сделать, - это то, что если на рабочем столе у вас будет сжато окно браузера, загрузите сайт, а затем увеличьте окно браузера, оно просто масштабирует "small.jpg" (как установлено в srcset), чтобы пользователь получил пикселированное изображение.

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

Если вам интересно, вы можете скопировать и вставить ниже этого в пустой файл html и запустить его в локальном сервере (должен быть на локальном сервере http://, чтобы вы могли просматривать вкладку отладки сети, чтобы увидеть, какое изображение браузер загружен). Запуск его в браузере с помощью файла url с помощью file:/// не позволит вам увидеть, какое изображение загружается с помощью вкладки сетевой отладки.

    <body>
        <div class="wrapper">

            <img 
                 src="http://i.imgur.com/DoWeH0X.jpg?1"
                 srcset="http://i.imgur.com/QV9vace.jpg?1 1400w, http://i.imgur.com/ZqkR6Bk.jpg?1 800w, http://i.imgur.com/gltBZ06.jpg?1 300w" 
                 alt="#"
            >

    </body>
</html>

Ответ 1

Вы можете использовать

var img = document.getElementById('resizeMe');

window.onresize = function() {
    img.outerHTML = img.outerHTML;
}

Это приведет к тому, что HTML-код будет отправлен через парсер снова, заставляя браузер перезагружать изображение в соответствии с srcset.

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

Или вы можете клонировать node, вставить его перед текущим node, а затем удалить старый node.

var img = document.getElementById('resizeMe');

window.onresize = function() {
    var clone = img.cloneNode(true);
    img.parentNode.insertBefore(clone, img);
    img.remove();
}

Который также заставит синтаксический анализ повторно отображать html, но будет потреблять больше ресурсов.

Ответ 1

Ответ 2