Dinamikus oldalbetöltés. Lusta tartalom betöltése a céloldalon
Sziasztok. Ma arról szeretnék beszélni, hogyan kell megszervezni a tartalom lusta betöltését a céloldalakon.
Gyakran "végtelen görgetésnek" is nevezik. Bizonyára Ön is tapasztalt hasonló hatást, amikor a tartalom kezdetben nincs jelen az oldalon, és ahogy az oldal gördül, simán betöltődik.
Nagyon régen írtak a „Javaslatok” rovatba azzal a kéréssel, hogy írjanak egy cikket egy ilyen hatás megvalósításáról:
Ezért úgy döntöttem, hogy elkezdem a megvalósítást. Köszönöm az ötleteket. Kezdjük el...
Mint a legtöbb esetben, most is a jQuery könyvtár felvételével kezdjük:
És most el kell térned egy kicsit, és elmagyarázom neked a módszer lényegét. Mindezt azért indítjuk el, hogy ne az oldal összes eleme (portfóliója vagy vélemények), hanem szükség szerint töltsön be. Például amikor a felhasználó a „További megjelenítés” gombra kattint. Így az oldal sokkal gyorsabban töltődik be. És most a lényeg, az ajax technológia segítségével betöltjük a kívánt elemet (div) ill harmadik féltől származó fájl a nyitóoldalunkra. Minden olyan egyszerű, mind elméletben, mind gyakorlatban, és ezt hamarosan látni fogod.
Most készítsük el a fő blokkot például munkáink képeivel. Tegyük fel, hogy ikonokat rajzolunk, és a gombra kattintva betöltjük őket. Létrehoztam egy ilyen szerkezetet:
Portfólió
Mutass többet...
Amint látja, minden egyszerű. De mire kell odafigyelni? És figyelni kell a div-re az id="smartPortfolio", id="moreButton" és id="loadingDiv" paraméterekkel, mivel ezeket a szkriptben használják, ami segít nekünk más oldalak tartalmának betöltésében. A SmartPortfolio portfóliónk „tárolója”. MoreButton - ez lesz a mi gombunk, rákattintva a portfólió egy másik része töltődik be. LoadingDiv - az a terület, ahol a szöveg megjelenik, ha a portfólió teljesen megnyílik, vagy valamilyen hiba történik.
Például néhány olvasó továbbra is megpróbálja tesztelni ezt a szkriptet nem a szerveren, hanem egyszerűen megnyitja az indexfájlt a böngészőben. Ebben az esetben hibaüzenetet fognak látni. Ezen kívül nagyon lassú kapcsolat, időbe telhet a fájlok letöltése, és hogy a felhasználó megértse, hogy a folyamat folyamatban van, beírhat egy üzenetet, hogy az adatok betöltése vagy elhelyezése folyamatban van (kép, folyamatjelző vagy valami más).
A forgatókönyvet nem magam írtam, hanem az egyik oldalon találtam, a forráskódban szerepel a szerző, akit érdekel, nézze meg. Mivel nem túl nagy, megadom az egészet, de ha ugyanazokat az azonosító neveket és fájl elérési útvonalakat tervezi használni, mint az enyém, akkor bele sem nézhet, hanem egyszerűen a záró body tag elé helyezheti (a lábléc) .
Azok számára, akik változtatásokat terveznek, íme maga a szkript:
var lazyload = lazyload || (); (function($, lazyload) ( "use szigorú"; var page = 2, buttonId = "#moreButton", loadingId = "#loadingDiv", container = "#smartPortfolio"; lazyload.load = function() ( var url = "./pages/" + oldal + ".html"; $(buttonId).hide(); $(loadingId).show(); $.ajax(( url: url, siker: function(response) ( if () !response || response.trim() == "NINCS") ( $(buttonId).fadeOut(); $(loadingId).text("A portfólió teljesen betöltődött"); return; ) appendContests(response); ), error : function(response) ( $(loadingId).text("Elnézést, valami hiba történt a kéréssel. Kérjük, frissítse az oldalt."); ) )); ); var appendContests = function(response) ( var id = $ (buttonId); $(buttonId).show(); $(loadingId).hide(); $(response).appendTo($(container)); oldal += 1; ); ))(jQuery, lazyload) ;
Tehát most érdemes beszélni azokról a fájlokról, amelyekből információkat fogunk betölteni. A szkript feltételezi, hogy ezek 2.html…5.html stb. nevű fájlok lesznek. amely az információinkat tartalmazza. Például a 2.html fájlom töltődik be először, és a következő tartalommal rendelkezik:
Az én webhelyem szerkezetében az oldalak mappában találhatók azok az oldalak, amelyekről a későbbi betöltéshez információkat vesznek, ha rákattintunk. Három fájl van, amelyek közül kettő megtelt, az utolsó pedig üres. Felveszi a script logikáját.
A szkriptben az elérési út a következőképpen van megadva:
Var url = "./pages/" + oldal + ".html";
Ha más elérési utat kíván használni, feltétlenül cserélje ki a szkriptben. Ezenkívül, ha más azonosítókat használt, akkor azokat újra kell definiálni a szkriptben. Pont itt:
És amint mondtam, a záró body címke előtt szerepeltetjük magát a szkriptet:
Mint ez bekapcsolva nyitóoldal Megvalósíthatja a lusta betöltést. Küldj több olyan témát, amelyekről szeretnél cikket olvasni a blogon. Lehetőség szerint nem a tervezett anyagot igyekszem közzétenni, hanem azt, amiről a „Javaslatok” rovatban kérdez. És mára ennyi. Viszlát!
AJAX és jQuery. Dinamikus tartalomfrissítés. Alapok (változások 2012.01.03-tól)
Ez a cikk megvitatja, mi az AJAX és a jQuery, és példákat tekint meg ezek használatára.
Az AJAX egy olyan webalkalmazások létrehozására szolgáló eszköz, amelyek a háttérben kommunikálnak a szerverrel. Ebben az esetben a felhasználó dinamikus tartalomfrissítéssel ellátott alkalmazást kap, anélkül, hogy a teljes oldalt újra kellene tölteni.
jQuery - JavaScript-keretrendszer, egy olyan könyvtár, amely lehetővé teszi néhány Javascript-funkció kényelmesebb használatát, mint például: létrehozás vizuális effektek, eseménykezelés, DOM manipuláció és AJAX támogatás.
Letöltés legújabb verzió jQuery, és ismerje meg az összes funkciót részletesen a fejlesztő webhelyén: http://www.jquery.com/
Ebben a cikkben a jQuery könyvtár egyetlen függvényét vizsgáljuk meg, mégpedig a $.ajax() függvényt. Ez a funkció lehetővé teszi számunkra, hogy adatokat küldjünk a szervernek, és válaszokat kapjunk a szervertől, mindezt a háttérben, az oldal újratöltése nélkül. Az adatok fogadásának vagy továbbításának beállítása a $.ajax() függvény meghívásának paramétereitől függ. A főbbeket az alábbiakban tárgyaljuk. A paraméterekről bővebben a jQuery kézikönyvében olvashat.
Térjünk át a példákra.
Fontos! A példák helyes működéséhez a következőket kell tennie: 1. Minden fájlt UTF-8 kódolással kell írni. 2. A szkripteket a webszerveren kell futtatni, nem pedig a böngészőben fájlként.
1. példa: Dinamikus tartalomfrissítés időzítőn
Készítsünk egy egyszerű programot, amely megjeleníti aktuális idő, másodpercenként egyszer frissíti az időzítő. Ennek a programnak az egyik jellemzője, hogy egy másik külső fájlból információt kap az aktuális időről.
Az index.html fájl tartalma.
A kódban több funkció is található, magyarázzuk el őket.
1. A jQuery könyvtár a fejlécben található HTML fájl, ez a sor erre van írva.
Maga a jquery.js fájl ugyanabban a mappában található, mint a példafájlok.
2. A dokumentum törzsében létrejön egy tároló, amelybe a tartalmat betöltjük.
3. Első pillantásra furcsa, hogy a helyes beállításhoz a $(document).ready() függvény szükséges jQuery működik, ráadásul benne minden előkészületet elvégezhetünk a program működéséhez. Esetünkben meghívjuk a show() függvényt, amely egy olyan mechanizmussal rendelkezik, amely egy másik fájlból származó tartalmat tud lekérni, és beállítunk egy időzítőt úgy, hogy a show() függvényt másodpercenként egyszer hívjuk meg.
4. A show() függvény a $.ajax() függvény meghatározott számú paraméterrel történő hívásából áll, amely lehetővé teszi, hogy a háttérben a szerveren lévő külső fájlból kapjunk információkat.
Tekintsük a használt $.ajax() függvény paramétereit.
Url: "time.php" A tartalom letöltéséhez szükséges time.php fájlra utal. cache: false A lekérdezések eredményei nem kerülnek gyorsítótárba. siker: function(html)( $("#content").html(html); ) Ha a kérés sikeres, a vezérlés átmegy egy függvénynek, amely paraméterként fogadja a tartalmat, és kiírja a tárolóját. A tárolóba való írás a következő sorban történik: $("#tartalom").html(html);
A time.php fájl tartalma.
A time.php fájl célja a pontos idő megjelenítése a képernyőn.
2. példa: Dinamikus tartalomfrissítés a felhasználó választása alapján
Olyan program, amely dinamikusan tölti be a felhasználó által választott tartalmat.
Az index.html fájl tartalma.
Melyik oldalt szeretnéd megnyitni?
A dokumentum törzsében egy űrlap jön létre, amelyen két gomb található, amelyen keresztül a felhasználó kiválasztja a kívánt tartalmat. És egy konténer a tartalom betöltéséhez.
Az 1. oldal gombkattintási eseményét a $("#btn1").click() függvény, a 2. oldal gomb kattintási eseményét pedig a $("#btn2").click() függvény kezeli.
3. példa: Adatok küldése a szerverre a háttérben és tartalom lekérése
Vegyünk egy példát, amely elküldi a megadott felhasználónevet a szervernek. A szerver egy név fogadásakor üdvözletet küld, és megszámolja a beírt név karaktereinek számát.
Az index.html fájl tartalma.
A dokumentum törzsében létrejött egy űrlap a felhasználónév megadására. És egy konténer a dinamikus tartalom betöltéséhez.
Vegye figyelembe, hogy maga az űrlap nem rendelkezik a szokásos művelet- és metódusmezőkkel. A $("#myForm").submit() függvény eseménykezelőként működik a "Küldés" gombra kattintva. Tekintsük ezt a függvényt.
Amint látjuk, a fő munka ismét a $.ajax() függvényhez kapcsolódik. Ezúttal megjelennek Extra lehetőségek, amelyet az 1. és 2. példában nem vettünk figyelembe. Nevezetesen:
Típus: "POST" Adatátvitel típusa. adatok: "username="+$("#felhasználónév").val() A szervernek átadott paraméterek. Ebben az esetben a felhasználónév mező tartalmát adjuk át - a felhasználónév. Általában a paraméterek ugyanúgy vannak felírva, mint az in GET módszer, egy sorban, például: adatok: "username=Vasya&age=18&sex=male"
Vegye figyelembe, hogy a végére a következő sor van írva:
return false; Ez azért történik, hogy az űrlap ne próbáljon meg adatokat átvinni abba a fájlba, amelyből elindult, és az oldal ne töltsön be újra.
A greetings.php fájl tartalma.
".$_REQUEST["felhasználónév"]."! "; echo "A nevedben betűk vannak: ".strlen($_REQUEST["felhasználónév"])."."; ?>
Üdvözletet jelenítünk meg a képernyőn, és megszámoljuk a név karaktereinek számát.
Minta forrásfájlok letöltése (16,8 kb):
Összegzésként le kell szögezni, hogy a dinamikusan frissített tartalommal történő oldalkészítés nyilvánvaló előnyei mellett számos hátrányt is figyelembe kell venni a webhely fejlesztése során, nevezetesen:
1. A dinamikus tartalomfrissítéseket tartalmazó oldalakon a böngésző "Vissza" gombja nem működik megfelelően.
2. A dinamikus tartalomfrissítéssel rendelkező oldalak tartalmuk alapján nem változtatják meg az URL-t, így nem lehet őket könyvjelzővel ellátni.
3. A dinamikus tartalomfrissítéseket tartalmazó oldalak nincsenek indexelve kereső motorok, mert nem hajtanak végre JavaScript-parancsokat.
Ezek a hiányosságok programozással kiküszöbölhetők. Ez a cikk nem foglalkozik ilyen módszerekkel.
Már egy ideje nem tettem közzé semmilyen kódot. Ma kijavítom a helyzetet, és adok néhány hasznos jQuery-részletet, amelyekre mindenképpen szüksége lesz a webhelyein.
Nem megyek bele az elméletbe, minden jQuery dokumentáció megtalálható a könyvtár hivatalos honlapján. Csak emlékeztetlek, mi az a jQuery.
jQuery az JavaScript könyvtárösszpontosítva JavaScript interakcióés HTML. A jQuery könyvtár megkönnyíti bármely DOM-elem elérését, a DOM-elemek attribútumainak és tartalmának elérését, valamint azok kezelését. A jQuery könyvtár kényelmes API-t is biztosít az AJAX-szal való munkavégzéshez.
Akkor gyerünk!
1. Sima görgetés az oldal tetejére
Egyetlen weboldal sem teljes nélküle. Mindössze 4 sornyi kód lehetővé teszi a látogatók számára, hogy egy kattintással gördítsék fel az egész oldalt.
A táblázatok észlelésének és olvashatóságának javítása érdekében megkettőzheti a címüket a táblázat alatt. Apróságnak tűnik, de nagyon kényelmes az összetett és nagy asztaloknál, amelyek nem férnek el egy képernyőn.
Ismeretes, hogy a blokkokat magasságban kell igazítani szabvány azt jelenti A HTML és a CSS nem olyan egyszerű. Csak néhány sornyi kód az alábbiakban lehetővé teszi, hogy az összes blokk magasságát egyenlővé tegye a nagyobb blokk magasságával.
Mint tudják, a táblázat érzékelése és olvashatósága észrevehetően jobb lesz, ha többszínű sorváltást végez. Ez nagyon könnyen megvalósítható a jQuery segítségével.
A jQuery segítségével nagyon könnyen megvalósítható a blokk (részleges) oldalfrissítés. Például az alábbi kód lehetővé teszi a #refresh blokk automatikus frissítését 10 másodpercenként.
SetInterval(function() ( $("#refresh").load(location.href+" #refresh>*",""); ), 10000); // ezredmásodperc kell várni
7. Kép előtöltése
Ez a kód lehetővé teszi a képek betöltését a háttérben, anélkül, hogy az oldal megtekintése közben betöltődne. Csak sorolja fel a 7. sorban azokat a képeket, amelyeket elő kell töltenie.
$.preloadImages = function() ( for(var i = 0; i ").attr("src", arguments[i]); ) ) $(document).ready(function() ( $.preloadImages("hoverimage1.jpg","hoverimage2.jpg"); ));
8. Külső hivatkozások megnyitása új ablakokban/lapokon
Ez a részlet arra kényszeríti az oldalon lévő összes külső hivatkozást, hogy új böngészőablakban nyíljon meg. A szkript gyakorlatilag meghatározza a webhely aktuális domainjét, és akkor működik, ha nem egyezik a linkben szereplő címmel.
$("a").each(function() ( var a = new RegExp("/" + window.location.host + "/"); if(!a.test(this.href)) ( $(this ).click(function(event) ( event.preventDefault(); event.stopPropagation(); window.open(this.href, "_blank"); )); ) ));
9. Letiltás a teljes böngészőablakban
Ez a szkript segít kinyújtani a blokkot, hogy kitöltse a böngésző képernyőjét. Kiváló modális ablakokhoz és párbeszédablakhoz.
Ha engedélyezi a webhely látogatóinak, hogy saját maguk állítsák be jelszavaikat, célszerű ellenőrizni annak összetettségét, és erről tájékoztatni a látogatót.
Először írjuk meg a kód HTML részét:
Az alábbi kód segítségével pedig ellenőrizzük a beírt jelszót, és információkat jelenítünk meg a látogató számára: jelszava összetett, közepes vagy gyenge, valamint azt is, hogy nem túl rövid-e.
$("#pass").keyup(function(e) ( var strongRegex = new RegExp("^(?=.(8,)))(?=.*)(?=.*)(?=.*) (?=.*\\W).*$", "g"); var mediumRegex = new RegExp("^(?=.(7,)))(((?=.*)(?=.*) )|((?=.*)(?=.*))|((?=.*)(?=.*))).*$", "g"); var elégRegex = new RegExp("( ?=.(6,)).*", "g"); if (false == elégRegex.test($(this).val())) ( $("#passstrength").html("További karakterek "); ) else if (strongRegex.test($(this).val())) ( $("#passstrength").className = "ok"; $("#passstrength").html("Erős!" ); ) else if (közepesRegex.test($(this).val())) ( $("#passstrength").className = "alert"; $("#passstrength").html("Közepes!") ; ) else ( $("#passstrength").className = "hiba"; $("#passstrength").html("Gyenge!"); ) return true; ));
11. Kép átméretezése jQuery segítségével
Természetesen logikusabb a szerver oldalon PHP és GD segítségével átméretezni a képeket, de vannak helyzetek, amikor ezt a kliens oldalon kell megtenni. A jQuery pedig ismét segítségünkre lesz ebben.
$(window).bind("load", function() ( $("#product_cat_list img").each(function() ( var maxWidth = 120; var maxHeight = 120; var ratio = 0; var szélesség = $( this).width(); var magasság = $(this).height(); if(width > maxWidth)( arány = maxWidth / szélesség; $(this).css("width", maxWidth); $(this) .css("magasság", magasság * arány); magasság = magasság * arány; ) var szélesség = $(this).width(); var magasság = $(this).height(); if(height > maxHeight)( arány = maxMagasság / magasság; $(this).css("height", maxHeight); $(this).css("szélesség", szélesség * arány); szélesség = szélesség * arány; ) )); //$( "#contentpage img").show(); // KÉP ÁTMÉRETE ));
12. Tartalom betöltése az oldalon lefelé görgetés közben
Ezt a technikát gyakran végtelen görgetésnek nevezik. A tartalom betöltődik, amikor a felhasználó görgeti az oldalt. Ez elég könnyen megvalósítható az alábbi kóddal.
