Вопрос по css, srcset, html, responsive-design – Можно ли пересчитать используемое изображение `srcset`, если размер окна браузера изменился?

12

Можно ли получить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>
Этот вопрос заслуживает большего количества голосов. Спасибо! Что вы выбрали, чтобы работать лучше для вас? Type-Style

Ваш Ответ

2   ответа
0

var img = document.getElementById ('my-element'); img.src = img.src;

Возможно, может быть сокращено до:document.getElementById('my-element').src+=''; ausi
6

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

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 при разборе, но потребляет больше ресурсов.

Ни один из них не работает, когда я тестировал в Chrome версии 55.0.2883.87 м Patrick Forget
@ Патрик Как ты это тестируешь? (Можете ли вы включить ссылку на пример не работает? user4639281
Ваш голос с ответом получит меня:NoModificationAllowedError: DOM Exception 7: An attempt was made to modify an object where modifications are not allowed. Второй ответ решает проблему, я бы порекомендовал удалить первый пример, так как он больше не работает. Mark
@ Марка первая версия работает для меня, но я должен сделатьimg = document.getElementById('resizeMe'); вOnResize обработчик. Я думаю, это потому, что еще, во второй раз вызывается обработчик,img является устаревшей ссылкой, которую мы не можем заменить (переназначить ееouterHTML). JDS

Похожие вопросы