Hoe een Awesome Image Preloader te maken

Hoe vaak vind je dat afbeeldingen op een website netjes worden geladen; het soort waar een laadpictogram voor het eerst verschijnt, en de afbeelding verdwijnt dan, eenmaal geladen? Deze techniek kan de prestaties van uw website aanzienlijk verbeteren. Als u nog niet bekend bent met deze methode, heeft u geluk! Vandaag maken we een preloader-plug-in voor uw projecten. Geïntrigeerd? Laten we beginnen!

Stap 1: uw werkruimte instellen

Eerst gaan we de projectmap voor deze zelfstudie instellen. We hebben het volgende nodig:

Ons belangrijkste HTML-bestand
CSS-map voor ons stylesheet- en laadpictogram (in de map 'i')
JS-map voor jQuery en onze plug-in
AFBEELDINGEN

Stap 2: De HTML

We beginnen met de HTML-code.

     Afbeelding Preloader       Preloader - Laad afbeeldingen met stijl

Niets bijzonders hier: gewoon HTML-code voor een eenvoudige galerij. We hebben jQuery, onze plug-in, geïmporteerd jquery.preloader.js (momenteel leeg) en de stylesheet van onze preloader. Ter afronding voegen we een ongeordende lijst toe, die lijstitems bevat als afbeeldingen die zijn omwikkeld met een ankertag (meestal gedaan in een website voor het openen van een lightbox of het linken naar een site).

Merk op dat de extra p tag wrapping elk anker wordt gebruikt voor het stylen van de afbeelding; ze zijn niet expliciet vereist.

Stap 3: De CSS

Nu gaan we een maken preloader.css stylesheet in de css map en maak daarbinnen een submap aan ik waarin we ons preloader-pictogram behouden. Preloaders.net heeft een mooie verzameling laadpictogrammen waaruit u kunt kiezen. Voeg de volgende code toe aan uw stylesheet:

 * marge: 0; padding: 0;  body background: url (i / bg.jpg);  #container width: 960px; marge: 0px auto;  h2 font-weight: 100; text-shadow: #ffffff 1px 1px 0px; text-align: center; padding: 20px; font-size: 32px; color: # 555555; border-bottom: 1px dashed #ccc; margin-bottom: 30px; font-family: Georgia, "Times New Roman", Times, serif;

Eerst hebben we een gemaakt 960px gecentreerde container en hebben een achtergrond toegevoegd aan de pagina. Daarnaast hebben we wat basisstyling toegevoegd aan de titel ( h2 label ).

De galerij stylen

Vervolgens zullen we de galerij stylen en, terwijl we bezig zijn, wat CSS3-goedheid inbrengen.

 #gallery lijststijl: geen;  #gallery li background: # e8e8e8; float: left; display: block; rand: 1px vast # d7d7d7; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 1px 1px 6px #ddd; -moz-box-shadow: 1px 1px 6px #ddd; box-shadow: 1px 1px 6px #ddd; marge: 15px 56px; padding: 0;  #gallery li p border: 1px solid #fff; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; margin: 0; padding: 7px;  #gallery li a display: block; color: # fff; text-decoration: none; padding: 0;  #gallery img width: 315px; Hoogte: 210px; margin: 0; padding: 0;

Op dit punt zou onze galerij er als volgt uit moeten zien:

De Preloader-klasse instellen

Laten we een maken preloader klasse die verantwoordelijk is voor het weergeven van het laadpictogram, terwijl de afbeeldingen worden geladen.

 .preloader background: url (i / 89.gif) center center no-repeat #ffffff; weergave: inline-block;

Het preloader element is tonen eigenschap moet worden ingesteld op blok of inline blok; Anders wordt het laadpictogram niet weergegeven.

Stap 4: De plug-in schrijven

Laten we beginnen met het maken van de plug-insstructuur en opties.

Het toestaan van aanpassingsopties maakt een plugin veel flexibeler voor de gebruiker.

We beginnen met de basisstructuur:

 $ .fn.preloader = function (options) var defaults = delay: 200, preload_parent: "a", check_timer: 300, ondone: function () , oneachload: function (image) , fadein: 500 ; // variabelen declaratie en precaching afbeeldingen en parent container var opties = $ .extend (standaardinstellingen, opties),

Onze opties

vertraging - Opeenvolgende vertraging tussen vervaging in afbeeldingen
preload_parent - Voeg preloadklasse toe aan de bovenvermelde ouder. Als de afbeelding niet wordt gevonden, wordt deze omwikkeld met een ankertag
ondone - Terugbellen wordt uitgevoerd wanneer alle afbeeldingen zijn geladen
oneachload - Wordt aangeroepen wanneer elke afbeelding is geladen met afbeelding als parameter
fadein - De duur van de animatie vervagen

Stap 5: Variabelen

Vervolgens verklaren en precachen we de variabelen die we in de rest van de plug-in zullen gebruiken.

 var defaults = delay: 200, preload_parent: "a", check_timer: 300, ondone: function () , oneachload: function (image) , fadein: 500; // variabelen declaratie en precaching afbeeldingen en parent container var opties = $ .extend (standaardinstellingen, opties), root = $ (this), images = root.find ("img"). css ("visibility": "hidden" ondoorzichtigheid: 0), timer, teller = 0, i = 0, checkFlag = [], delaySum = options.delay;

Ten eerste, we precachen het wortelelement (altijd een best practice), zoeken dan de afbeeldingen (waardoor ze ook verborgen worden) en verklaren tenslotte de variabelen die gedetailleerder zullen worden uitgelegd als we ze tegengaan.

Er zijn twee dingen die de moeite waard zijn om hier te vermelden: je zou in eerste instantie denken dat de eenvoudigste oplossing is om de afbeeldingen te verbergen en ze vervolgens te laten vervagen in plaats van door al deze code te bladeren. Het probleem is echter dat, als we de afbeeldingen verbergen, de browser de ruimte markeert die ze gebruikten om als leeg te bezetten, en dus wordt de lay-out zelf verknoeid wanneer ze uiteindelijk worden vervaagd. Oké, wel, wat als we ondoorzichtigheid om de afbeeldingen te "tonen" en "verbergen"? Dat is een betere oefening, hoewel sommige versies van IE deze methode niet waarderen.

Stap 6: Preloader Class toevoegen

We herhalen nu elk afbeeldingselement en controleren of het bovenliggende element de naam is die in de optie wordt genoemd. Als dat het geval is, voegen we er onze klasse preloader aan toe; anders verpakken we de afbeelding binnen een ankertag met een klasse van preloader.

 images.each (function () var $ this = $ (this); if ($ this.parent (options.preload_parent) .length == 0) $ this.wrap (""); else $ this. parent (). addClass ("preloader"); checkFlag [i ++] = false;); images = $ .makeArray (afbeeldingen);

Hier gebruiken we een array checkFlag, en stel de artikelwaarde van elke array in op vals. Het gebruik ervan zal duidelijk worden gemaakt terwijl u voortbeweegt.

Stap 7: Alles samenbrengen

We zullen nu implementeren wat er achter de schermen gebeurt. Er is een boolean eigenschap, genaamd compleet, geassocieerd met het afbeeldingsobject. Wanneer de afbeelding volledig is geladen, is deze boolean ingesteld op waar. Dus we blijven deze eigenschap controleren voor elke afbeelding en, als deze inderdaad is ingesteld op waar, we vervagen dat beeld.

We kunnen de gebruiken setInterval functie om continu te bepalen of de afbeeldingen zijn geladen of niet. Dit is waar de check_timer de optie komt binnen: deze is rechtstreeks gekoppeld aan de frequentie van onze timer.

Een afbeelding heeft ook een onload evenement geassocieerd met het; je vraagt je waarschijnlijk af waarom we het niet gebruiken. De reden is dat sommige browsers niet goed werken met die gebeurtenis; als zodanig slaan we het over. We hebben een oplossing nodig die voor alle browsers werkt. We beginnen met:

 init = function () timer = setInterval (function () , options.check_timer);

timer is de variabele die naar de timer verwijst. Dit is nodig om de timer uiteindelijk te stoppen. Deze functie wordt samen met alle variabelen gedeclareerd.

Elke afbeelding controleren

We herhalen de array en controleren elke afbeelding compleet eigenschap om te bepalen of het downloaden is voltooid. Als het is gedownload, stellen we het in op zichtbaar en vervagen langzaam. Wanneer de animatie is beëindigd, verwijderen we de klasse preloader van de bovenliggende.

 voor (i = 0; i  Er is een klein probleempje hier: de timer blijft controleren - zelfs na de afbeeldingen zijn allemaal geladen. Om dit tegen te gaan, voegen we een tellervariabele toe en verhogen deze nadat elke afbeelding is geladen. Op deze manier kunnen we controleren of de tellervariabele gelijk is aan de grootte van de afbeeldingenreeks. Als dat het geval is, stoppen we.
  timer = setInterval (function () if (counter> = checkFlag.length) clearInterval (timer); options.ondone (); return; for (i = 0; i Er is echter nog een klein probleempje. Onze timer kan eerder stoppen dan verwacht; als een afbeelding is geladen, is het compleet eigenschap is ingesteld op waar en de teller wordt dus met 1 verhoogd. Wanneer de lus de volgende keer wordt uitgevoerd, is de afbeelding al geladen, de compleet eigenschap is ingesteld opwaar, en dus zal de lus tweemaal lopen! Om dit probleem op te lossen, gebruiken we de checkFlag matrix. Wanneer een afbeelding wordt geladen, zullen we instellen checkFlag naar waar, en stel de voorwaarde in dat de teller alleen wordt verhoogd op voorwaarde dat de checkFlag waarde is vals. Dus de teller wordt slechts eenmaal verhoogd: wanneer een afbeelding voor de eerste keer wordt geladen.
  timer = setInterval (function () if (counter & gt; = checkFlag.length) clearInterval (timer); options.ondone (); return; for (i = 0; i & lt; images.length; i ++) if (images [i] .complete == true) if (checkFlag [i] == false) checkFlag [i] = true; options.oneachload (afbeeldingen [i]); counter ++; delaySum = delaySum + options. delay; $ (images [i]). css ("visibility", "visible"). delay (delaySum) .animation (onacity: 1, options.fadein, function () $ (this) .parent ( ) .removeClass ("preloader"););, options.check_timer);
  Merk op dat we de ondone functie wanneer de tellervlag groter is dan de lengte van de array - d.w.z. wanneer alle afbeeldingen zijn geladen. Wanneer de teller wordt opgehoogd, oneachload wordt aangeroepen met de huidige afbeelding die is doorgegeven als de parameter.
 
  Stap 8: Het gemakkelijke deel 
 Tot slot noemen we in deze stap de in het(); functie aan het einde van de plug-in. 
  in het(); / / geroepen bij de laatste lijn van plugin
 Dat is alles; we hebben een volledig werkende plug-in voor preloading gemaakt en de grootte is minder dan 2 kB. Toch blijft er een probleem: de afbeelding van het laadpictogram wordt willekeurig geladen. Dat willen we niet. In de volgende sectie zullen we daar voor zorgen.
 
  Stap 9: De extra mijl gaan 
  Om het hierboven genoemde probleem te verhelpen, laden we eerst het pictogram en bellen we het in het functie. Maar het laadpictogram is een achtergrondafbeelding, dus we injecteren het als een afbeelding op de pagina, maar houden het verborgen. Wanneer het laadt, noemen we het in het functie. We zijn in wezen het pictogram zelf aan het laden. 
  var icon = jQuery ("", id: 'loadingicon', src: 'css / i / 89.gif'). hide (). appendTo (" body "); timer = setInterval (function () if (pictogram [0] .complete == true) clearInterval (timer); init (); icon.remove (); return;, 100);
 Eerst maken we een afbeeldingsobject met een ID kaart van loadingicon, en een bron wijzend naar het pad van het laadpictogram. Vervolgens voegen we het de lichaam en in eerste instantie verbergen. Ten slotte stellen we het interval in om te controleren of het pictogram is geladen of niet. Als dit het geval is, doden we de timer en beginnen we met het vooraf laden van de afbeeldingen. Vergeet ook niet dat pictogram te verwijderen! 
 
 Conclusie
 Met die laatste stap zijn we klaar! Deze functionaliteit werkt in alle browsers, net zoals verwacht, en degradeert elegant. Zorg er wel voor dat je de preloader-elementen instelt tonen eigendom aan blok of inline-block. Het is nu klaar om te worden gebruikt in uw projecten. Bedankt voor het lezen!



		
			
	   
	




Code