Для рендеринга прогрессивного изображения в прогрессивной манере
Я преобразовал загруженное изображение в прогрессивное в бэкэнде, используя Узел ГМ, и сохранил в файле. После этого я хочу показать, что преобразованные прогрессивные изображения во фронтенде. Моя проблема в том, что когда я визуализировал это изображение, оно отображалось построчно. Но по сравнению с обычным изображением эти прогрессивные изображения загружаются первыми.
Но я хочу загрузить эти изображения из размытия в нормальное. Как я могу это сделать?
Во внешнем интерфейсе я написал код с использованием HTML следующим образом.
<html>
<head></head>
<body>
<h1>Hello</h1>
<img style = "width:50%" src = "https://www.dropbox.com/s/p57ik1kl04k1iax/progressive3.jpg?raw=1" />
<img style = "width:30%" src = "https://www.dropbox.com/s/3nnc03tfwxrpu5q/Porsche-GT2-4K-UHD-Wallpaper.jpg?raw=1" />
</body>
</html>
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Я не думаю, что можно достичь всего, о чем вы просите. При запросе статического файла ответом будет поток, который отправляется линейным образом (пиксель за пикселем, слева направо, сверху вниз). Чтобы достичь желаемого стиля, вы должны контролировать, как изображение передается клиенту. Таким образом, невозможно добиться этого, просто разместив один статический файл.
Но вы можете имитировать этот эффект, разместив несколько копий вашего изображения (с разным разрешением) и загрузив все эти файлы один за другим.
Вот статья о том, как Medium это делает.
Также может пригодиться ленивый. Вот пример использования lazysizes. Если вы посмотрите на вкладку сети на этой странице, вы увидите, что одновременно запрашиваются два разных размера одного и того же изображения.
Нет, я не хочу накладывать эффект. Потому что после применения эффекта обычное и прогрессивное изображение занимают одинаковое время для рендеринга. Без эффекта прогрессивное изображение отображается быстрее по сравнению с обычным изображением.
Если это так, можете ли вы просто добавить изображение-заполнитель (сплошное белое или черное), чтобы эффект выглядел так, как будто сначала отображаются обычные изображения, а затем ваши прогрессивные изображения полностью визуализируются позже?
Сначала я не мог понять, почему это загружалось как базовое изображение, но использование инструментов разработчика Chrome, увеличение масштаба и регулирование соединения показали мне, что происходит.
Ваше прогрессивное изображение загружается так, как вы ожидаете, с начальным изображением с низким разрешением, за которым следует все более подробная информация. Первый проход загружается построчно и поэтому ведет себя как базовое изображение.
Проблема в том, что изображение настолько огромное, более 5000 пикселей в ширину, что его размер изменяется в браузере до такой степени, что после загрузки исходного изображения не наблюдается видимого улучшения качества изображения.
Чтобы был заметен эффект от размытия до резкости, изображение должно быть намного меньше по размеру в пикселях. Если он встраивается в веб-страницу, измените его размер до максимального размера, который вы ожидаете для просмотра, поэтому при 50% ширины экрана на широкоэкранном экране 1920 вы захотите изменить размер до 960 пикселей в поперечнике. Теперь размер файла также будет намного меньше, а изображение будет загружаться быстрее, поэтому, если вы не используете очень медленное соединение, по-прежнему может быть неочевидно, что jpeg загружается постепенно.
Если вам нужно полноразмерное изображение, доступное пользователям для печати или каких-либо других целей, то вы всегда можете добавить на страницу отдельную ссылку вместе с предупреждением о размере файла.
Например.
<a href = "https://www.dropbox.com/s/p57ik1kl04k1iax/progressive3.jpg?raw=1">Print quality image (11.1 MB)</a>
Вам нужно иметь два изображения
- Изображение большого размера
- Маленькое изображение
Вам нужно поставить
<img id = "image" style = "width:100%, height: auto; filter: blur(5px); transition: 1s filter linear;" src = "small image source" />
тогда делай
fetch('big image source').then((response) => response.blob()).then((blob) => {
let img = document.querySelector('#image');
img.onload = () => URL.revokeObjectUrl(img.src)
img.src = URL.createObjectUrl(blob)
img.style.filter = 'none';
})
Шаг 1: не используйте Dropbox в качестве хоста ресурсов. Это не то, для чего это в малейшей степени. Даже бесплатный хостинг github.io из репозитория ваших проектов на github.com будет лучшей альтернативой.