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

Можно ли получить 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>

источник

2015-06-17 sam

Этот вопрос заслуживает большего внимания. Благодаря! Что вы решили работать лучше всего для вас? –

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

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

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

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

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

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

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

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

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

источник

2015-06-17 18:30:16

Ответ на ваш ответ: «' NoModificationAllowedError: DOM Exception 7: Была сделана попытка изменить объект, где изменения не разрешены. '' 'Второй ответ устраняет проблему, я бы рекомендовал удалить первый пример, поскольку он больше не работает. – Mark

Ни один из них не работает, когда я тестировал в Chrome Version 55.0.2883.87 m –

@Patrick Как вы тестируете это? (можете ли вы включить ссылку на пример, который не работает? –

я нашел это, чтобы заставить повторно вынести

уаг IMG = document.getElementById ('мой-элемент'); img.src = img.src;

источник

2017-12-06 21:00:13 bas

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

ответ

Смежные вопросы