Как сделать прогрессивную загрузку картинок на сайте?

Question

[Алекс]

Может ли кто-нибудь подсказать простой способ реализовать следующее:

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

Есть ли простой способ это реализовать?

P.S.

1. Прогрессивный jpeg не подходит в этом случае. Мне нужно сделать именно замену заблюренных картинок меньшего разрешения на картинки высокого разрешения, а не отображать пережатые картинки с дальнешим улучшением.
   
   
2. Lazy load тоже не подходит в этом случае
   
   
3. В некоторых элементах ширина картинки задается как width: 100%;поэтому некоторые плагины, где указывается явное разрешение (data-width="1920"data-height="1080") не работают.
   
   
4. Некоторые картинки на сайте заключены в элементах, типа <paper-card image="/images/untitled.png" ...
   поэтому непосредственно через CSS, тоже не понятно как заменять low res на high res
   
   
5. Пробовал реализовать через pilpil, он работает, но некорректно отображается (поверх других элементов).
   

Answer 1

[Денис Инешин]

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

Например так:

<img src="image-blur.jpg" class="my_image" />
<paper-card image="/images/image-blur.png" class="my_image" />

$(".my_image").each(function () {
    // тут находим атрибуты src или там image, и вырезаем ключевое слово blur из урла
});

Comments

[Алекс]

Благодарю вас

Answer 2

[Андрей Федоров]

Дубль. Постепенная загрузка изображения?

Comments

[Алекс]

Прогрессивны jpeg не подходит в этом случае. Мне нужно именно сделать замену заблюренных картинок меньшего разрешения на картинки высокого разрешения, а не отображать пережатые картинки с дальнешим улучшением.
Не знаете ли способ сделать именно это?

[Алекс]

А за ссылку спасибо. Попробовал progressive jpeg. Потери качества не особо заметно

[Андрей Федоров]

Алекс Алябьев: Ну так оно не для этого. Во времена медленных интернетов можно было сразу показать эскиз, не дожидаясь окончания загрузки графики... Сейчас то зачем картинки подменять? Сделайте типа того codepen.io/aliencash/pen/VjEKop

[Алекс]

Андрей Федоров: согласен, но на хорошем wifi, то все в порядке, но увы на 3g / 4g после удаления экрана загрузки картинки все еще подгружаются и выглядит это не очень плавно, я хотел просто сделать так, чтобы картинки загружались мгновенно и был плавный переход на большее разрешение.

Answer 3

[GreatRash]

Почему же lazy load не подходит?

Comments

[Алекс]

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

[GreatRash]

Алекс Алябьев: Ну это тот же lazy load, только триггером будет не попадание картинки во вьюпорт, а окончание загрузки картинки с низким разрешением или например окончание загрузки у window.