Забавени зареждане на изображението

Какво е мързелив натоварване?

Когато мързеливи зареждане на изображения в сайта са заредени асинхронно, т.е. след пълно зареждане на видимата част на страницата или като цяло, при условие, само когато изгледа. Това означава, че ако потребителят не dolistaet страница до края, в долната част на изображението не се зарежда изобщо.

Този подход се използва в някои сайтове, но е особено забележимо в сайтове с много снимки. Отидете на любимите си онлайн сайт за снимки с висока разделителна способност, и веднага ще разберете как на сайта зарежда с ограничен брой снимки. Както можете да превъртите надолу, тя ще се разглежда като заместители бързо заменени с реални изображения. Например, обърнете внимание на зареждане на ОС на Unsplash.com сайт. Превъртете през тази част на страницата във видимата част на екрана е замяната на Паркираните снимки с висока резолюция:

Защо ми се струва на мързеливи зареждане на изображения?

Има най-малко две отлични причини защо трябва да обмисли възможността за използване мързелив зареждане на изображения на вашия уеб сайт:

Съвременните технологии за уеб програмиране

AngularJS, WebPACK, NodeJS, ReactJS, пишеща машина, Gulp, Git, Github.
Научете всичко за най-новите технологии в уеб програмиране

Ако сайтът ви показва съдържание и дава на потребителите някои функции чрез JS, DOM за зареждане е от решаващо значение. Обикновено, скриптове чакат за пълно натоварване преди да изпълни DOM. На един сайт с много мързеливи зареждане на изображения (асинхронно зареждане) може да бъде решаващ фактор за това дали един потребител ще остане, или да напуснат мястото.

Повечето решения за мързеливи натоварване се зареждат изображения само когато потребителят превърти до точката, където тя влиза в илюминатора. Ако потребителят никога затегне страница до този момент, изображението няма да бъде зареден. Това спестява трафик за повечето потребители, особено на потребителите на мобилни устройства и потребители на по-бавни връзки, ще ви благодаря.

Така че, мързелив зареждане на изображения, подобрява ефективността на сайта, но как най-добре да направите това?

Идеален начин не съществува. Ако искате JS, а след това няма да е трудно да напишете свой собствен сценарий за мързеливи натоварване. Или можете да намерите на нетните подходящите решения и да се експериментира с тях. Аз го направих и е установено, тези пет интересни техники.

№1 Simple мързелив товарене и появата на Дейвид Уолш

Дейвид Уолш предложил сценария за мързеливи зареждане на изображения. Опростена версия:

Src атрибут в маркера за IMG се заменя с данни КРБ:

В CSS IMG елементи с данни SRC атрибут скрита. След зареждане на изображения се появяват плавно чрез преходи:

Допълнителна JS добавя SRC атрибут на всички, IMG и дава стойност на съответния атрибут на данни КРБ. След като всички изображения, заредени, сценарият премахва данни SRC атрибут на тага IMG на:

Дейвид Уолш също така предлага folbek случаят, когато JS не се зареди. Folbek може да се намери в своя блог. Плюс това, това решение: лесен за изпълнение, както и ефективно.

От друга страна, този метод не включва функцията за изтегляне за превъртане страници. С други думи, браузърът изтегля всички изображения, независимо дали потребителят е превъртат страницата или не. Страница се зарежда по-бързо, тъй като изображенията се зареждат след HTML. Въпреки това, не спести трафик.

№2 Lazy зареждане с постепенното подобряване на Робин Озбърн

Робин Озбърн предлага супер гениално решение въз основа на прогресивно подобрение. В своя метод за мързеливи зареждане на JS счита за подобрение за обикновен HTML и CSS.

Защо постепенното подобрение? Ако искате да покажете изображения с помощта на JS, какво ще стане ако JS изключен или ако има грешка, която блокира изпълнението на сценария? В този случай, не прогресивни потребители аксесоар не виждат изображението. Не много добре.

По-подробна информация относно решението може да бъде намерена в Osborne Pen. Има и друг напреднал Pen. които представляват JS счупване.

При тази техника редица предимства:

Техника прогресивно подобрение осигурява на потребителите достъп до съдържание.

Методът е не само подходящ за положението на недостъпни JS, но и в рамките на ситуацията, в която се разбива на JS: всички знаем, те могат да бъдат податливи на грешка скриптове, особено в среда с много работещи скриптове.

Осъществено мързелив зареждане на изображения, за да се движи. Ако даден потребител не преминете на правилното място, изображението няма да се стартират.

Методът не разчита на външни зависимости, т.е. Не необходимите рамки и плъгини.

По-подробна подход Робин Озбърн може да се намери в своя блог.

№3 Lazy Load XT JQuery плъгин

За да свържете Lazy Load XT към проекта си, добавете JQuery-библиотеката, преди да затворите във връзка с един от горните два файла. Например:

Не искате да използвате JQuery, Lazy Load XT предлага олекотена версия - малък скрипт jqlight.lazyloadxt.min.js:

Замяна на изображенията документа в SRC атрибут в данни КРБ:

Приставката може да се инициализира, или можете да го направите ръчно. Например, за да се инициализира елементите на отписването на пробата:

Този плъгин добавя много добавки. Само няколко:

Ако добавите jquery.lazyloadxt.spinner.css, а след това снимките се изтеглят, можете да видите анимиран стругар.

Ако включите animate.min.css проект и пиша този ред $ .lazyLoadXT.onload.addClass = 'анимирани bounceOutLeft "; JS-в файл, можете да добавите всички ефекти, за да изтеглите изображения от Animate.css. bounceOutLeft може да бъде заменен от друг ефект.

Ползи Lazy Load XT и съответните му приложения:

Поддържа CDN, т.е. няма нужда да се изтегли скриптове Lazy Load XT с вашия сървър.

Широка подкрепа в браузъри, включително IE6-11 и Opera Mini.

Съвременните технологии за уеб програмиране

AngularJS, WebPACK, NodeJS, ReactJS, пишеща машина, Gulp, Git, Github.
Научете всичко за най-новите технологии в уеб програмиране

Lazy зареждане на изображения могат да бъдат използвани в дадена страница в превъртане контейнер в модели с вертикално и хоризонтално превъртане. Безкрайно много сценарии.

С добавки, можете да създадете прекрасни плавни преходи, добави поддръжка за ретина екрани, мързеливи натоварване фонови изображения и т.н.

Можете да заредите лениво различни видове медии.

Документацията показва как да се занимава със случая на JS деактивиран във Вашия браузър.

Няма нужда да се свържете пълен JQuery-библиотеката, за да използвате този плъгин.

Пълният списък от опции и добавки могат да бъдат намерени в хранилище Azy Load XT на GitHub.

Блази - JS-умен щепсел мързелив натоварване. По-конкретно: «Блази - лек скрипт мързелив натоварване (по-малко от 1.2Kb minifitsirovannaya и съкратен вариант). Тя ви позволява да заредите лениво и поддържа множество изображения, за да запазите трафик и сървърни заявки. Ако потребителите не преминете през цялата страница, сайтът ще се зареди по-бързо "- Сайт Блази

Този малък независим плъгин ви позволява да:

Лениво се зареждат изображения приставката, и фона.

Заредете различни изображения в зависимост от размера и резолюцията на екрана.

Lazy изображения натоварване в превъртате контейнер.

В подкрепа на по-стари браузъри, докато IE7-8.

Използвайте CDN, така че да не се поставя приставката на собствения си сървър.

Изпълнението база. Маркировка:

трябва да промените редовно IMG таг, както следва:

Добави клас .b-мързелив.

Използвайте контейнер като стойността на СРС. За HTTP-заявки спестявания могат да бъдат използвани inlaynovye прозрачен GIF кодиране base64. Но бъдете внимателни, защото няма да бъдат кеширани на следващите страници, която използва едно и също изображение.

Умение за данни-SRC точки на изображението, което искате да мързелив натоварване.

JS: въведете прост разговор Блази и настройте опциите за обект картата:

№5 мързелив товарене ефект замъглено изображение

Ако сте чели среда. Вие трябва да сте забелязали как сайтът зарежда основното изображение на публикацията. Първо виждате замъглено изображение с лошо качество, докато версията е зареден с висока резолюция:

Неясно контейнер Онлайн Medium

Лениво зареден с високо качество на изображението на сайта Medium

Има няколко начина за качване на изображения от мързелив толкова интересна замъглено ефект. Моят любим - машини от Крейг Бъклър. Плюс решението си:

Изпълнение: общо 463 байта и 1,007 байта CSS minifitsirovannogo JS-код.

Подкрепа за ретина екрани.

Не зависимости: не JQuery и други библиотеки и рамки.

Използва прогресивна техника усилване за по-стари браузъри, а счупените JS.

По-подробно метода може да се намери в статията "Как да създадете своя собствена обувка товаря прогресивни изображения", и да изтеглите кода от хранилището на проекта на GitHub.

заключение

Това е всичко, на 5 начини за мързеливи натоварване образите, с които можете да експериментирате в техните проекти.

Редакция: Екип webformyself.

Съвременните технологии за уеб програмиране

AngularJS, WebPACK, NodeJS, ReactJS, пишеща машина, Gulp, Git, Github.
Научете всичко за най-новите технологии в уеб програмиране

Най-IT новини и уеб разработки на нашия канал Телеграма

Практиката на оптимизация на сайта: ускорение изтеглите вашия сайт от време на време

Научете как да се ускори зареждането на сайта.