Nie tylko leniwe ładowanie obrazów w strony internetowe pomagają w osiągnięciu wieku, ale też pomaga w Search Engine Optimization jak zaobserwowano. Możesz użyć jQuery, a nawet Mootools do leniwego ładowania obrazów. Obrazy pojawią się tylko wtedy, gdy przewiniesz do nich.
Ta wskazówka jQuery zmniejsza wiele zewnętrznych żądań podczas ładowania strony, ostatecznie pomagając szybciej ładować blog WordPress. Korzystając z tej sztuczki, powinieneś również użyć techniki pamięci podręcznej, aby uprościć ładowanie strony.
Spis treści
Co to jest leniwe ładowanie?
Lazy loading ma miejsce wtedy, gdy pobierasz zawartość tak, jak jej potrzebujesz, zamiast pobierać ją wszystkie naraz.
Lazy loading to technika optymalizacji stosowana w Internecie. Ładuje tylko tę część strony internetowej, której potrzebujesz na początku, i nie ładuje żadnych innych części, dopóki ich nie klikniesz. W ten sposób nie musi ładować wszystkich informacji od początku do końca.
Jedną z form leniwego ładowania jest zwój w nieskończoność. Oznacza to, że podczas przewijania strony w dół automatycznie wczyta się więcej treści.
Dlaczego leniwe ładowanie ma znaczenie?
Ogromny ładunek strony internetowej jest pełen obrazów, skryptów, arkuszy stylów, czcionek i filmów. Robienie zdjęć do ponad 60% wielkości typowej strony internetowej. Nie można się ich pozbyć, ponieważ są one ważne przy projektowaniu strony internetowej.
Bez żadnej optymalizacji Twoja przeglądarka internetowa pobiera wszystko przed wyrenderowaniem strony. To sprawia, że strona ładuje się wolniej.
Sensowne jest zrobienie wszystkiego, co w Twojej mocy, aby Twoje strony internetowe ładowały się szybciej. A jeśli chodzi o obrazy, to one mają największy wpływ na rozmiar strony internetowej.
Więc jeśli zaczniesz od nich, to jest to dobry pomysł, ponieważ wtedy Twoja strona będzie się szybko ładować. Tutaj przydaje się leniwe ładowanie, ponieważ pobiera tylko te części obrazu, które są widoczne na Twojej stronie w danym momencie.
Jak skonfigurować Lazy Loading z jQuery?
Istnieją wtyczki, które umożliwiają wykonywanie prostych czynności, ale im mniej wtyczek użyjesz, tym bardziej wydajny będzie Twój blog.
Bez względu na to, jakiego motywu WordPress używasz, możesz bardzo łatwo zaimplementować leniwe ładowanie.
To tylko dwuetapowy samouczek, jeden do dodawania jQuery, a drugi to przypisanie tagu img do klasy, jeśli chcesz leniwie ładować określone obrazy na swoim blogu WordPress.
Oto funkcja jQuery, którą musisz dodać do skryptów swojego motywu.
/* lazyload.js (c) Lorenzo Giuliani * Licencja 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.utwórzArkusz Stylu(); 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() , zapytanie = $q('img.lazy') , processScroll = function(){ for (var i = 0; i < images.length; i++) { if (elementInViewport(images[i])) { loadImage(images[i], funkcja () { obrazy.splice(i, i);}); } }; } ; // Array.prototype.slice.call nie jest wywoływany w naszym pięknym IE8 for (var i = 0; i < query.length; i++) { images.push(query[i]); }; procesPrzewiń(); addEventListener('scroll',processScroll); }(ten);
<img src="blank.gif" class="lazy" data-src="/images/full-size.jpg" width="240" height="152"></a>
A oto jak można wywołać funkcję jQuery, aby dynamicznie zaimplementować Lazy loading obrazów. Musisz użyć klasy leniwej dla każdego obrazu, który chcesz załadować za pomocą funkcji jQuery.
Wnioski
Lazyload to dobra rzecz na swoim blogu lub stronie firmowej. Pomaga w SEO, a Google może to zobaczyć. Ale nie musisz się tym martwić, ponieważ wiedzą, jak działa leniwe ładowanie.
Możesz także dostosować go w dowolny sposób, zmieniając animację i dodając opóźnienie.
Cześć,
To dobra informacja i bardzo pomocna. Lazy Jest to bardzo pomocne, ponieważ używałem motywów do wyświetlania obrazów.
Dobra praca i nie przestawaj…!