ЦСИ загрузки изображения

Question

В HTML файле у меня есть что-то вроде этого:

<img src="dist/assets/img/photos/md/photo-1.jpg"/> 

, а затем JS проверить ширину окна и изменить путь изображения в соответствии с чем-то вроде:

<img src="dist/assets/img/photos/xs/photo-1.jpg"/> 

или

<img src="dist/assets/img/photos/lg/photo-1.jpg"/> 

вопрос заключается в том, для окна хз это нагрузить только Xs размера изображения или оба - в мкр (потому что я мкр путь в HTML) р Изображение размера lus xs от js?

спасибо.

Answer 1

Сначала мкр файл будет загружен и как только JavaScript загрузит, то хз также будет загружен, и <img> «s источник будет изменен на хз путь файла.

Answer 2

Среднее изображение может быть загружено, но у вас нет гарантии на это. Действительно, javascript может изменить значение атрибута src почти сразу, как только DOM готов. Запрос внешних ресурсов, таких как изображения, не блокирует запуск DOM ready.

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

NB: Для решения проблемы чувствительных изображений может вас заинтересовать атрибут srcset. Это зависит от what browsers you should support.