Оптимизиране на зареждането GIF изображения - GIF играе само когато се натисне

тема за оптимизация на сайта в момента се отразява все по-често. И не е чудно, тъй като в интернет е все по-бързо, а информацията се превръща все повече и повече. Само погледнете броя на изображенията, за да се оптимизира услуги, CSS стилове, JS стил появиха през последните години. За да се постигне бързо зареждане на уебсайта е станал много по-лесно, отколкото е било преди. Но дори и тук не всичко се решава лесно обслужване. Днес ще разгледаме един лесен начин да се зареди GIF само чрез кликване.

Ако искате да се проучи по-подробно скоростта на тема изтегляне, Препоръчваме Ви да прочетете следната статия за:

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

Плюсове и минуси на свалянето GIF когато се натисне

За да визуално да прецени всички "за" и "против" на този процес се подават всички очевидно в таблицата по-долу:

Макар че не е напълно ясно какво е смисъла на този метод, ако той имаше толкова много недостатъци. Но тук е най-новата плюс за мнозина (и включително и аз) ще бъде много по-важна от всички недостатъци, посочени по-горе. За да се постигне добра скорост на изтегляне - трябва да направим нещо.

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

Обичайна вложка GIF

Свали GIF, като кликнете

Обемът на всички файлове, свалени от браузъра, за първи път

По-конкретно, в този пример, огромна разлика!

Какво трябва да се направи, преди въвеждането на кода ...

Да речем, че са насърчени този процес и да знаете, че вашият сайт е на голям брой GIF изображения, но скоростта на изтегляне страда. И ти реши да приложи тази функционалност в своя проект (евентуално бъдещо). Има малка предварителна процедура, в която трябва да изготви преглед на изображенията, които искате да се показват веднага след като сайтът е зареден. Това е, това са образите, които вижда потребителят все още не е кликнал върху бутона за възпроизвеждане.

Какво може да бъде поставен върху изображението за преглед? Има 2 варианта: или да се направи за всеки преглед на изображенията на вашия GIF, който е първия кадър, или да се направи един образ, който ще се използва в целия сайт, независимо от GIF изображения. Въпреки това, за да решат как ще бъде по-добре за вашия проект, вие трябва да притежавате.

Така че сте подготвили всички визуализация изображения за всяка GIF изображение и вече е готов да приложи функционалност, а след това се пристъпва към най-интересното единица! 🙂

Блок "копиране и поставяне"

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

Започваме, както обикновено, с маркировката:

Етап 1. HTML маркиране

За WordPress собственици

За вас, там е отличен готов разтвор, като плъгин за WordPress. Приставката се нарича "WP GIF Player". Можете да го изтеглите от тук - изтегляне на плъгин "WP GIF Player".

Основни предимства и функции плъгин "WP GIF Player":

• "Play" в същото време само една GIF изображение
• Автоматично създаване на изображения за визуализация за GIF (по-горе, ние трябваше да го направите сами)
• GIF изображения се добавят много лесно, само с един бутон
• Възможно е да се паралелно натоварване GIF изображения
• Можете да зададете ограничение за GIF изображения максимална разделителна способност

За собственици на WordPress е добро решение, защото всички действия е постоянно prodelyvat ръчно може да бъде много време отнема и приставка да пиша - това не е сила на всички.

Сега GIF изображения - това е чудесен начин да се обясни най-важният момент. Също така, много записи се правят с GIF изображения, тъй като е възможно да се докаже използването на каквито и да било средства на местно ниво или чрез горещи клавиши.

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