Не само мързеливо зареждане на изображения в уеб страниците помагат за представянето на възрастта, но също така помага при Оптимизация за търсачки както се наблюдава. Можеш да използваш jQuery и дори Mootools за мързеливо зареждане на изображения. Изображенията ще се показват само когато превъртите до тях.
Този съвет на jQuery намалява много външни заявки, докато зарежда страницата, като в крайна сметка помага на вашия WordPress блог да се зарежда по-бързо. Докато използвате този трик, трябва да използвате и Cache Technique за опростяване на зареждането на страницата.
Съдържание
Какво е Lazy Loading?
Мързеливо зареждане е, когато изтегляте съдържание, както ви е необходимо, вместо да го изтегляте наведнъж.
Мързеливото зареждане е техника за оптимизация, използвана в интернет. Той зарежда само частта от уеб страницата, която ви е необходима в началото, и не зарежда никакви други части, докато не щракнете върху тях. По този начин не е нужно да зарежда цялата информация от началото до края.
Една форма на мързеливо зареждане се нарича infinity scroll. Това означава, че докато превъртате надолу по страницата, повече съдържание ще се зарежда автоматично.
Защо мързеливото зареждане има значение?
Огромният полезен товар на уеб страница е пълен с изображения, скриптове, таблици със стилове, шрифтове и видеоклипове. Изображенията вземат над 60% от размера на типична уеб страница. Не е възможно да се отървете от тях, защото са важни за дизайна на уеб страница.
Без никаква оптимизация, вашият уеб браузър изтегля всичко, преди да изобрази страницата. Това прави зареждането на страницата по-бавно.
Има смисъл да направите каквото можете, за да накарате вашите уеб страници да се зареждат по-бързо. А що се отнася до изображенията, те имат най-голям принос за размера на уебсайта.
Така че, ако започнете с тях, това е добра идея, защото тогава вашият уебсайт ще се зарежда бързо. Това е мястото, където мързеливото зареждане е полезно, защото изтегля само частите от изображение, които се виждат на вашата страница във всеки даден момент.
Как да настроя мързеливо зареждане с jQuery?
Има плъгини, които ви позволяват да изпълнявате прости неща, но колкото по-малко плъгини използвате, толкова по-ефективен ще бъде вашият блог.
Няма значение каква тема на WordPress използвате, можете да приложите мързеливо зареждане много лесно.
Това е само урок в две стъпки, едната за добавяне на jQuery, а другата е да присвоите img тага на клас, ако искате да заредите мързеливо конкретни изображения във вашия блог на WordPress.
Ето функцията jQuery, която ще трябва да добавите към скриптовете на вашата тема.
/* lazyload.js (c) Лоренцо Джулиани * Лиценз на MIT (http://www.opensource.org/licenses/mit-license.html) */ !function(window){ var $q = function(q, res) { if (document.querySelectorAll) { res = document.querySelectorAll(q); } else { var d=document , a=d.styleSheets[0] || d.createStyleSheet(); a.addRule(q,'f:b'); for(var l=d.all,b=0,c=[],f=l.length;b= 0 && rect.left >= 0 && rect.top ) } var images = new Array() , query = $q('img.lazy') , processScroll = function(){ for (var i = 0; i < images.length; i++) { if (elementInViewport(images[i])) { loadImage(images[i], функция () { images.splice(i, i); }); } }; } ; // Array.prototype.slice.call не може да се извика в нашия прекрасен IE8 за (var i = 0; i < query.length; i++) { images.push(query[i]); }; processScroll(); addEventListener('scroll',processScroll); }(това);
<img src="blank.gif" class="lazy" data-src="/images/full-size.jpg" width="240" height="152"></a>
И ето как можете да извикате функцията jQuery, за да приложите динамично мързеливо зареждане на изображения. Трябва да използвате мързеливия клас за всяко изображение, което искате да заредите с помощта на функцията jQuery.
Заключение
Lazyload е добро нещо за вашия блог или корпоративен уебсайт. Помага при SEO и Google може да го види. Но не е нужно да се притеснявате за това, защото те знаят как работи мързеливото зареждане.
Можете също да го персонализирате, както искате, като промените анимацията и добавите забавяне.
Здравейте,
Това е добра информация и е много полезна. Lazy Това е много полезно, тъй като използвах теми за показване на изображения.
Успешна работа и все така...!