Líné načítání je programové plugin jQuery, napsaný v JavaScriptu, který odkládá načítání obrázků na (velké) webové stránky. Obrázky, které nejsou v zorném poli uživatele, se tedy neotevřou, dokud uživatel neposune stránku dolů. Totéž jako přednabíjení, pouze obráceně.
Použití „líného načítání“ na stránkách obsahujících mnoho velkých obrázků umožňuje urychlit načítání stránky – prohlížeč ohlásí úplné otevření, jakmile se otevřou všechny viditelné obrázky. V některých případech použití tohoto modulu pomáhá snížit zatížení serveru.
Program je napsán na základě modulu pro načítání obrázků s názvem YUI ImageLoader Utility, autorem programu je Matt Mlinak.
Procházejte stránky dolů a zobrazte efekt.
Zdrojový kód se zatím nepodařilo získat. Pracuji na tom.
Jak program funguje?
Softwarový plugin je založen na jQuery (proč?) a proměnných vyvinutých Brandonem Aaronem, které jsou nyní součástí značkování jQuery. Uveďte je v názvu:
$("img").lazyload();
Poté se všechny obrázky načtou, jakmile k nim uživatel přistoupí.
Responzivní instalace
Program má možnosti pro pedanty, kteří chtějí osobně sledovat každý detail. Můžete nastavit práh otevření obrázku - ve výchozím nastavení je tato hodnota 0, to znamená, že se obrázek otevře, pouze když se objeví na stránce.
$("img").lazyload(( práh: 200 ));
Pokud nastavíte prahovou hodnotu na 200, bude před otevřením již načteno 200 pixelů obrázku.
Zástupný symbol obrázku
Můžete také nastavit zástupný symbol pro obrázek a událost, která se má začít načítat. Zástupný symbol musí obsahovat adresu obrázku. Softwarový modul nabízí průhledné, šedé a bílé obrázky o velikosti 1*1 pixel.
$("img").lazyload(( zástupný symbol: "img/grey.gif" ));
Událost pro zahájení načítání
Událost se nastavuje v jQuery – může to být cokoliv, včetně kliknutí nebo pohybu myši. Můžete vyvinout své vlastní možnosti. Ve výchozím nastavení program čeká, dokud uživatel neposune stránku dolů – poté se v okně prohlížeče objeví obrázky. Chcete-li zabránit načítání obrázků, dokud uživatel neklikne na zástupný symbol, postupujte takto:
$("img").lazyload((
zástupný symbol: "img/grey.gif",
událost: "klik"
});
Používání efektů
Ve výchozím nastavení plugin čeká na úplné načtení obrázku a poté zavolá funkci show() k jeho zobrazení. K této posloupnosti akcí můžete přidat libovolný efekt. Fragment kódu níže ukazuje, jak přidat efekt zeslabení. Na ukázkové stránce se můžete podívat, jak to vypadá.
$("img").lazyload((
zástupný symbol: "img/grey.gif",
efekt: "fadeIn"
});
Interní úložiště obrázků
Plugin můžete použít i pro obrázky uložené uvnitř rolovatelných kontejnerů – k tomu stačí zadat kontejner v kódu jako objekt jQuery. Existují demo možnosti pro horizontální a vertikální kontejnery.
#container ( height: 600px; overflow: scroll; ) $("img").lazyload(( zástupný symbol: "img/grey.gif", kontejner: $("#container")
});
Pokud jsou obrázky zobrazeny mimo pořadí
Po rolování stránky začne program vyhledávat nenačtené obrázky, přičemž během vyhledávání kontroluje, zda se obrázek stal viditelným. Ve výchozím nastavení se vyhledávání zastaví při nalezení prvního viditelného obrázku – předpokládá se, že pořadí obrázků na stránce je stejné jako v html kódu. S některými možnostmi označení to tak úplně není – v tomto případě byste měli použít funkci failurelimit, která reguluje pořadí, ve kterém se obrázky zobrazují.
$("img").lazyload(( limit selhání: 10
});
Pokud nastavíme hodnotu funkce na 10, program přestane hledat, jakmile najde 10 viditelných obrázků. Pokud má stránka složité rozložení, měli byste zde zadat poměrně velké číslo.
Můžete organizovat líné načítání obrázků, i když to není součástí hlavní funkčnosti programu. Pokud přidáte níže uvedený kód, program počká, až se stránka plně načte, a to nejen její html prvky, ale i její obrázky. Pět sekund po dokončení stahování se automaticky stáhnou také neviditelné obrázky. Můžete se podívat na demo verzi.
$(function() ( $("img:below-the-fold").lazyload(( zástupný symbol: "img/grey.gif", event: "sporty"
});
});
$(window).bind("load", function() ( var timeout = setTimeout(function() ($("img").trigger("sporty")), 5000; ));
To je pro dnešek vše! Děkuji za pozornost.
Při procházení internetu každý chce, aby se stránky webu načítaly co nejrychleji, nikdo nemá rád dlouhé čekání na načtení konkrétní stránky. Navíc toto čekání může být poměrně výrazně zpožděno v případech, kdy je na stránce příliš mnoho obrázků. Přítomnost obrázků na stránce činí stránku atraktivnější pro návštěvníky, zvyšuje viditelnost a v konečném důsledku pomáhá zvýšit návštěvnost vašeho webu. Musíme však vzít v úvahu skutečnost, že přítomnost obrázků výrazně ztěžuje stránky a prodlužuje dobu jejich načítání.
Pomalé načítání stránek negativně ovlivňuje SEO optimalizaci vašeho webu. V současné době mnoho webových stránek používá ve svých příspěvcích GIF nebo obrázky. formát PNG. Tyto obrázky jsou větší než obrázky JPEG a v důsledku toho může načítání stránek trvat ještě déle. Pro stažení každého takového obrázku je nutný samostatný HTTP požadavek, který také stahování nezrychlí.
K vyřešení tohoto problému se používá tzv. „líné“ neboli odložené načítání, při kterém se načítají pouze ty obrázky, které uživatel potřebuje. Tento článek popisuje šest nejlepších bezplatných pluginů WordPress pro líné načítání, které mohou výrazně zlepšit rychlost načítání stránek.
1. a3 Lazy Load - nejlepší plugin pro líné načítáníPlugin zrychlí váš blog a zlepší vizuální odezvu stránky na počítačích, tabletech a mobilních telefonech.
a3 Lazy Load nezatěžuje web a je vhodný pro mobily. Snadno použitelný plugin, který zrychlí váš web. Čím více těžkých prvků má váš web, tím lépe bude plugin dělat svou práci a tím více zlepšení výkonu uvidíte.
- Líné načítání pro všechny obrázky, gravatary, videa a snímky
- Výběr efektů načítání
- Podpora WooCommerce
- Vysoký výkon a nízké zatížení
- Můžete vyloučit obrázky a videa
- Zálohujte připojení JavaScript
- Podporuje všechny prohlížeče
Toto je plugin pro líné načítání obrázků vyvinutý WordPress.com, týmem TechCrunch a Jackem Goldmanem. Má jednoduchý kód, takže nepřetěžuje zdroje serveru.
Lazy je plugin, který se snadno instaluje a konfiguruje. Nevyžaduje prakticky žádné nastavování, práce začíná ihned po instalaci.
Hlavní vlastnosti pluginu:- Jednoduchý kód.
- Běží na WordPressu.
- Snadné použití.
- Používá jQuery.sonar.
BJ je další bezplatný plugin WordPress pro líné načítání, který nahradí všechny vaše obrázky, miniatury, gravatary a obsah prvků iframe ve sledované oblasti „útržkem“. Samotné obrázky se načtou poté, co se objeví v okně prohlížeče. Tato metoda umožňuje urychlit načítání stránek a také ušetřit uživatelský provoz.
Plugin má responzivní design, což vám umožní pracovat s mobilními zařízeními. Na mobilní zařízení Obrázky se automaticky přizpůsobí velikosti obrazovky. Tento plugin je připraven pro Retina, což znamená, že může fungovat na zařízeních Apple.
Hlavní vlastnosti pluginu:- Nahrazení obrázků „pahýlem“.
- Automatická změna velikosti obrázků.
- Podpora sítnice.
- Úspora uživatelského provozu.
jQuery je bezplatný plugin pro líné načítání, který používá Java skript. Skript Java načítá obrázky pouze tehdy, když jsou ve viditelné oblasti okna prohlížeče.
jQuery je velmi oblíbený plugin z úložiště WordPress.
Hlavní vlastnosti pluginu:- Popularita.
- Pomocí Java skriptu.
- Malý objem.
- Není potřeba prakticky žádná nastavení.
Jedná se o velmi dobrý plugin WordPress pro líné načítání, který načte obrázky, když uživatel posouvá stránku dolů a dosáhne oblasti obrázku. Tento plugin také používá skript jQuery. Umožňuje vám zkrátit dobu načítání, protože text se načte jako první a pro obrázky se vytvoří nové připojení HTTP.
Skutečnost, že se stránky nenačítají současně, umožňuje snížit počet připojení HTTP a výrazně snížit zatížení serveru.
Hlavní vlastnosti pluginu:- Používá skripty jQuery.
- Umožňuje snížit počet připojení HTTP.
- Umožňuje urychlit načítání stránky.
- Má dva typy nastavení.
Jedná se o velmi malý plugin, který používá skript jQuery. Obrázky načítá pomocí skriptu o velikosti pouze 0,6 KB. Plugin umožňuje snížit zatížení serveru snížením počtu připojení.
Obrázek se načte do HTML kódu stránky pomocí schématu data: URL, čímž odpadá nutnost duplicitního obrázku, který je nutný pro líné načítání.
Hlavní vlastnosti pluginu:- Používá skripty jQuery.
- Používá odlehčené skripty.
- Používá schéma s daty: URL.
- Umožňuje snížit počet připojení.
Tento článek popisuje zdarma WordPress pluginy k línému načítání obrázků, které pomohou rychleji načítat stránky vašeho webu WordPress. S pomocí těchto pluginů můžete jednoduše vytvářet zázraky. Napište do komentářů, jaký plugin pro líné načítání obrázků používáte.
Dnes vám ukážu, jak líně načítat obrázky pomocí pluginu B-lazy.
Líné načítání obrázků je, když se obrázky načítají postupně při procházení webu. To vám umožní zrychlit web, protože při prvním načtení se web nenačte velký počet obrázky, které nejsou potřeba na první obrazovce:
ZačněmeNejprve si stáhneme plugin. Chcete-li to provést, přejděte na webovou stránku http://dinbror.dk/blazy/ vpravo horní roh Klikněte na „Stáhnout“. Na kartě, která se otevře, zkopírujte kód pluginu a vložte jej do našeho souboru js. Pokud nechcete přejít na webovou stránku pluginu, zkopírujte kód z pole níže.
// Kód knihovny /*! hej, Lazy.js – v1.8.2 – 2016.10.25 Rychlý, malý a závislý bezplatný skript pro pomalé načítání (https://github.com/dinbror/blazy) (c) Bjoern Klinggaard – @bklinggaard – http://dinbror .dk/blazy */ (function(q,m)("function"===typeof define&&define.amd?define(m):"object"===typeof exports?module.exports=m():q.Blazy =m()))(toto,funkce())(funkce q(b)(var c=b._util;c.prvky=E(b.možnosti);c.počet=c.délka prvků;c. zničeno&& (c.destroyed=!1,b.options.container&&l(b.options.container,function(a)(n(a,"scroll",c.validateT))),n(window,"resize",c saveViewportOffsetT),n(window,"resize",c.validateT),n(window,"scroll",c.validateT));m(b))funkce m(b)(for(var c=b._util) , a=0;a=c.left&&b.bottom>=c.top&&b.left