Блог

Предварительная загрузка:

 <link rel="preload" as="image" href="http://localhost/mysite/wp-content/uploads/2021/10/test-02.png" imagesrcset="http://localhost/mysite/wp-content/uploads/2021/10/test-02-300x169.png 300w, http://localhost/mysite/wp-content/uploads/2021/10/test-02-1024x576.png 1024w, http://localhost/mysite/wp-content/uploads/2021/10/test-02-370x208.png 370w, http://localhost/mysite/wp-content/uploads/2021/10/test-02-330x186.png 330w, http://localhost/mysite/wp-content/uploads/2021/10/test-02-374x210.png 374w, http://localhost/mysite/wp-content/uploads/2021/10/test-02-480x270.png 480w, http://localhost/mysite/wp-content/uploads/2021/10/test-02-561x316.png 561w, http://localhost/mysite/wp-content/uploads/2021/10/test-02-660x371.png 660w, http://localhost/mysite/wp-content/uploads/2021/10/test-02-690x388.png 690w, http://localhost/mysite/wp-content/uploads/2021/10/test-02-768x432.png 768w, http://localhost/mysite/wp-content/uploads/2021/10/test-02-978x550.png 978w, http://localhost/mysite/wp-content/uploads/2021/10/test-02-990x557.png 990w, http://localhost/mysite/wp-content/uploads/2021/10/test-02-1089x613.png 1089w, http://localhost/mysite/wp-content/uploads/2021/10/test-02-1152x648.png 1152w, http://localhost/mysite/wp-content/uploads/2021/10/test-02-150x84.png 150w, http://localhost/mysite/wp-content/uploads/2021/10/test-02.png 1200w" imagesizes="(max-width: 1200px) 100vw, 1200px">
 

Изображение:

 <img width="1200" height="675" src="http://localhost/mysite/wp-content/uploads/2021/10/test-02.png" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" loading="lazy" srcset="http://localhost/mysite/wp-content/uploads/2021/10/test-02.png 1200w, http://localhost/mysite/wp-content/uploads/2021/10/test-02-300x169.png 300w, http://localhost/mysite/wp-content/uploads/2021/10/test-02-1024x576.png 1024w, http://localhost/mysite/wp-content/uploads/2021/10/test-02-370x208.png 370w, http://localhost/mysite/wp-content/uploads/2021/10/test-02-330x186.png 330w, http://localhost/mysite/wp-content/uploads/2021/10/test-02-374x210.png 374w, http://localhost/mysite/wp-content/uploads/2021/10/test-02-480x270.png 480w, http://localhost/mysite/wp-content/uploads/2021/10/test-02-561x316.png 561w, http://localhost/mysite/wp-content/uploads/2021/10/test-02-660x371.png 660w, http://localhost/mysite/wp-content/uploads/2021/10/test-02-690x388.png 690w, http://localhost/mysite/wp-content/uploads/2021/10/test-02-768x432.png 768w, http://localhost/mysite/wp-content/uploads/2021/10/test-02-978x550.png 978w, http://localhost/mysite/wp-content/uploads/2021/10/test-02-990x557.png 990w, http://localhost/mysite/wp-content/uploads/2021/10/test-02-1089x613.png 1089w, http://localhost/mysite/wp-content/uploads/2021/10/test-02-1152x648.png 1152w, http://localhost/mysite/wp-content/uploads/2021/10/test-02-150x84.png 150w" sizes="(max-width: 1200px) 100vw, 1200px">
 

Как вы можете видеть на рисунке , он загрузил только test-02.png изображение, а не изображение относительно размера браузера. Обратите внимание, что я создал пользовательское устройство в chrome и установил значение Device pixel ratio 2 .

Но здесь, в firefox, как вы можете видеть в нем, он загрузил test-02-768x432.png . Я тоже установил DPR: 2 .

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

Я понял, что он правильно загрузит изображение нужного размера, а также работает предварительная загрузка изображения(с новым заданным мной путем). Но когда я изменяю его обратно на предыдущее значение, изображение, которое будет отображаться test-02.png , находится там, где оно должно быть test-02-768x432.png . Таким образом, кажется, что предварительная загрузка с тем же путем в img теге создает проблему.

Как я могу это исправить? Это ошибка в Google Chrome?

Версия Chrome: 94.0.4606.61 (Официальная сборка) (64-разрядная версия)

Обновить

Я сортировал дорожки по ширине, поднимаясь вверх. Похоже, chrome загрузит только последнее изображение в srcset атрибуте, и проблема не связана с предварительной загрузкой.

Обновить

Я понял, что это может быть ошибка/функция в chrome. Вот ссылка:

https://github.com/aFarkas/lazysizes/issues/133