Как на сайтах делают ленивую загрузку изображений?

Question

[Павел Гоголинский]

Эффект заметен на этой странице
https://medium.com/@sdboyer/so-you-want-to-write-a...
Фотографии на странице сначала расплывчатые и постепенно при загрузке страницы становятся четкими. Как реализуется такой эффект?

Answer 1

[Vitaly Sivkov]

https://jmperezperez.com/medium-image-progressive-...

Answer 2

[seredaes]

Вообще я знаю при сохранении картинки в PhotoShop можно выставить алгоритм, и вот в зависимости от него картинка будет кусками подгружаться или сразу будет нечеткая, а после с каждой подгрузкой четче становиться. Но можно это и CSS сделать, только зачем?

Answer 3

[lacrim]

Проще всего использовать готовую библиотеку для этих целей, вот например несколько штук:

• JQuery — https://plugins.jquery.com/lazyload/
  
• YUI — developer.yahoo.com/yui/examples/imageloader/imglo...
  
• Prototype — www.bram.us/projects/js_bramus/lazierload
  
• Mootools —davidwalsh.name/mootools-lazyload
  

Я часто в работе использую технику по заимствованную из этого примера, выполнения ленивой загрузки при скролинге - codepen.io/Vin-ni/pen/LEVwez

Так же не забывайте, что если все изображения будут подгружатся не с основного домена а например с img.ваш_сайт.com вы выиграете во времени загрузки за счёт разделения запросов к серверу.

Comments

[Павел Гоголинский]

jquery битая ссылка

[lacrim]

Поправил =)