AJAX tətbiqi üçün tam hüquqlu JS önyükləyicisinin hazırlanması. Faizli yükləmə ilə preloader Önyükləyici nədir

Bu gün bir önyükləyicidən istifadə edərək WordPress saytının yüklənməsini necə gizlətmək barədə danışacağıq. Hamımız ağ yükləmə ekranı əvəzinə animasiya şəkli göstərən saytları görmüşük. Yavaş yükləmə saytınız varsa, lakin hələ də boş ağ ekrana çox uzun müddət baxmağı sevməyən səbirsiz istifadəçilərin qarşısını almaq istəyirsinizsə, bu kiçik hiylə kömək edə bilər. Yaxşı, gəlin WordPress saytı üçün əvvəlcədən yükləyici əlavə edək

Plugini və onun necə işlədiyini təsvir etməyə başlamazdan əvvəl çox tövsiyə edirəm. Yalnız bütün bu tövsiyələr kömək etmədiyi təqdirdə, bütün ümidlər əvvəlcədən yükləyiciyə və onun sayt istifadəçilərinin səbrinə təsiridir.

Önyükləyici nədir

Önyükləyici veb səhifə tam işlənmədən və ekranda nümayiş etdirilməzdən əvvəl animasiya və ya yükləmə göstəricisini göstərmək üçün mexanizmdir. Başqa sözlə desək, sayt səhifəsi brauzer tərəfindən emal edilərək yüklənərkən ekranda boş ekranı əvəz edən animasiya göstərilir.

Mən bu alətin əleyhinəyəm, düşünürəm ki, önyükləyici quraşdırmaqdansa saytın yüklənməsini optimallaşdırmaq daha yaxşıdır. Mənim anlayışımda, önyükləyiciyə yalnız böyük portallar, onlayn mağazalar və milyonlarla məlumatı emal edən nəhəng verilənlər bazası olan onlayn xidmətlər lazımdır və onlar yükləməni sürətləndirə bilmirlər. Bu mənim şəxsi fikrimdir və siz mənimlə razılaşmaya bilərsiniz.

Statistikaya görə, sayt 4 saniyədən çox yüklənirsə, uğursuzluq ehtimalı yüksəkdir. İstifadəçi tam yüklənməsini gözləmədən saytı tərk edə bilər və bu çox pis göstəricidir. Normal optimallaşdırma ilə, ideal deyil, amma yenə də saytım 2-3 saniyəyə yüklənir və bu göstərici mənə çox uyğun gəlir və istifadəçi statistikası da göstərir. Buna görə bir daha deyirəm ki, saytın yavaş yüklənməsi ilə əvvəlcədən yükləyici deyil, optimallaşdırma lazımdır.

Qısa ön sözdən sonra qayıdaq “qoç”larımıza. Plugini quraşdırın və konfiqurasiya edin.

Preloader plagini, ümumi baxış və konfiqurasiya

Tapdığım ən adekvat və pulsuz preloader plagini unikal adı olan bir plagindir - Preloader. Bəli, belədir, sürprizlər yoxdur. Fakt budur ki, wordpress.org kitabxanasında plagin axtaranda tapa bilməyəcəksiniz. Axtarış çubuğuna əvvəlcədən yükləyicini yazmalısınız. Pluginin necə qurulacağını öyrənə bilərsiniz. Bu belə görünür:

Quraşdırıldıqdan sonra Plugins / Preloader sekmesine keçin, bu kiçik menyudan parametrlər başlayır.

Beləliklə, qısa siyahıdakı bütün parametrlər:

• İlk parametr xətti önyükləyicinin fon rəngidir, standart olaraq ağdır (#FFFFFF). Sizi maraqlandıran parametri təyin edə bilərsiniz.
• İkincisi, bu, gif animasiyasının yeridir, onu hər hansı birinə dəyişdirmək olar, yalnız 128x128 piksel ölçüsünü nəzərə almaq lazımdır. Parametrlərdə verilmiş linkdən istifadə edərək maraqlandığınız animasiyanı yükləyə bilərsiniz.
• Növbəti addım preloaderin yüklənəcəyi qovluqları seçməkdir. Yükləyicini kateqoriyalara, bütün sayta, ayrı-ayrı etiket səhifələrinə və ya sadəcə əsas səhifəyə quraşdıra bilərsiniz.
• Etməli olduğunuz son şey aktiv mövzu qovluğunuzda header.php faylını açmaq və onu açılış etiketindən dərhal sonra əlavə etməkdir. təklif olunan div (
  ).
• Əgər plagin aktivdirsə, onda siz artıq plaqinin işlədiyini yoxlaya bilərsiniz.

Onu da qeyd etmək lazımdır ki, GIF-i dəyişdirərkən onun adı preloader olmalıdır və şəkil plagin qovluğunda yalnız bir belə animasiya olmalıdır.

Bu, WordPress saytı üçün Preloader plaginindən istifadə etmək üçün bu sadə bələdçini yekunlaşdırır, sualınız və ya probleminiz varsa, şərhlərdə yazın.

Sonra bir az fikirləşəndən sonra qərara gəldim ki, saytın yüklənməsini gizlədəcək, əvəzində nə isə göstərəcək bir şeyə ehtiyacım var və səhifə tam yüklənəndə o, ziyarətçiyə tam şəkildə göstəriləcək. Mənə lazım olanı bir az axtardıqdan sonra bir neçə skripti keçdim və üslublarda bir az özümü əlavə etdim, lazım olan nəticəni aldım. Açılış səhifəsinin ziyarətçiləri indi tam yüklənmiş məzmunu görməzdən əvvəl kiçik bir ekran görürlər. Skript elə işləyir ki, ilk növbədə yüklənir və parametrlərdə nə təyin etdiyimizi göstərir, səhifəni yüklədikdən sonra brauzer window.onload hadisəsini çağırır və skriptimiz yüklənmiş səhifəni göstərir.

Bu, belə bir şeyə bənzəyir, səhifə nə qədər uzun müddət yüklənirsə, sıçrayış ekranı da bir o qədər uzun görünəcək:

Belə bir önyükləyicini saytınıza və ya səhifənizə qoşmaq çətin deyil. İdeyanı həyata keçirmək üçün etməli olduğunuz ilk şey, əlbəttə ki, HTML işarələməsini daxil etməkdir. Bunu, məsələn, saytın başlığında edə bilərsiniz. İstənilən yerə, tercihen açılış etiketindən dərhal sonra yapışdırın bədən. Bu ID ilə əsas blokdur p_prldr, bütün ekranı dolduracaq və içərisinə səhifə tam yüklənməmişdən əvvəl ziyarətçinin görəcəyi hər şeyi yerləşdirə bilərsiniz. Bu blokun içərisində yükləmə animasiyasını və mətni yerləşdirəcəyik.

#p_prldr( mövqe: sabit; sol: 0; yuxarı: 0; sağ:0; aşağı:0; fon: #9A12B3; z-indeks: 30;) .contpre kiçik(şrift ölçüsü:25px;) .contpre( eni : 250px; hündürlük: 100px; mövqe: mütləq; sol: 50%; yuxarı: 48%; kənar-sol:-125px; kənar-yuxarı:-75px; rəng: #fff; şrift ölçüsü: 40px; hərf aralığı: -2px; text-align:center; line-height:35px;) #p_prldr .svg_anm (mövqe: mütləq; en: 41px; hündürlük: 41px; fon: url(images/oval.svg) mərkəz mərkəzi təkrarlanmır; fon -ölçüsü: 41px; kənar: -16px 0 0 -16px;)

Siniflə bloklayın svg_anm, bu bizim animasiyamızdır. Önyükləyicimdə istifadə edirəm SVG Animasiya üçün qrafika. Mənə lazım olan ölçüyə qədər ölçülə bilər və real və sərin görünür. İstəyirsinizsə, bir az istifadə edə bilərsiniz gif animasiya və ya sadəcə statik bir şəkil, hamısı sizin təsəvvürünüzdən asılıdır. Bu fayl məndə var oval.svg Onun ölçüsünü bir parametrlə təyin etdim fon ölçüsü: 41px;, siz həmçinin animasiya ölçüsünə bərabər blokun eni və hündürlüyünü təyin etməlisiniz. eni: 41px hündürlük: 41px;

Əgər siz də bu animasiyanı bəyənirsinizsə, aşağıdakılardan seçə bilərsiniz, bunun üçün sizə lazım olanın üzərinə sağ klikləyib istədiyiniz qovluğa qeyd edin.

Yaxşı, animasiyalar özləri.

Animasiya fonu əl ilə qurulub və sizdə əsas yükləyici blokunda olduğu kimi olacaq, animasiyanın özü ağ rəngdədir, ona görə də onu endirdikdən sonra açsanız, heç nə görməyəcəksiniz 🙂 Sonradan bunun olmadığını yazmamağınız üçün işləmir.

Onun işləməsi üçün əvvəlcədən yükləyici skriptinin özünü əlavə etməlisiniz, lakin əvvəlcə kitabxananın qoşulduğundan əmin olmalısınız. jQuery. Bu edilmədikdə, bağlamadan əvvəl şapkada baş və ya bağlamadan əvvəl zirzəmidə bədən bu sətri əlavə edin:

Bundan sonra skriptin özünü daxil edirik.

Əgər siz əsas blokun identifikatorunu və blokun sinfini animasiya ilə dəyişməmisinizsə, onda skriptdə heç nəyi dəyişməyə ehtiyac yoxdur. Siz yalnız bir şeyi konfiqurasiya edə bilərsiniz, yəni səhifəni göstərmədən əvvəl gecikmə. Səhifə yükləndikdə, animasiyalı blok yox olacaq və səhifənin məzmunu rəvan görünəcək, lakin siz başqa bir gecikmə təyin edə bilərsiniz. Bu skriptdə 500 millisaniyəyə, yəni yarım saniyəyə bərabərdir, onu azalda və ya əksinə, ehtiyacınız olduqda artıra bilərsiniz.

Hər şey düzgün aparılır və nəticə sizi sevindirməlidir. Əsas odur ki, tələsməyin və təlimatları diqqətlə izləyin.

Hamısı budur, diqqətinizə görə təşəkkürlər. 🙂

Önyükləyicilərin yaradılması çox dəb halını alıb, çünki onlar gözəl görünürlər, ən əsası isə istifadəçini sayt hələ yüklənərkən onu tərk etməməyə məcbur edir.

Sayt üçün preloader necə hazırlanır?

Əgər istifadə etsəniz, əvvəlcədən yükləyicinin özü bir neçə saniyə ərzində hazırlana bilər açar təslim həllər və ya bir neçə dəqiqəyə, hər şeyi sıfırdan özünüz yazsanız :)

Amma gəlin düzgün başa düşək...

Brauzerin mahiyyəti ondan ibarətdir ki, o, kodu mərhələlərlə göstərir. Bu o deməkdir ki, brauzer yuxarıdan aşağı bütün kodları keçir və kodun ortasında haradasa ağır JS skriptləri ilə qarşılaşırsa, bu zaman sayt bir qədər donacaq.

Preloader onu elə edir ki, biz bütün sayt məzmununu gizlədək və yalnız bütün sayt bütün skriptlər və üslublarla yükləndikdə onu tam şəkildə göstərək.

Önyükləyicinin qısa sxemi:

• Açılış gövdəsi teqindən sözün əsl mənasında, biz əvvəlcədən yükləyici ilə div yerləşdiririk;
• Əvvəlcədən yükləyicini yandırın və bütün səhifə məzmununu gizlədin;
• Səhifəni yüklədikdən sonra əvvəlcədən yükləyicini çıxarın və saytı göstərin.

İndi koda nəzər salaq. Əvvəlcə əvvəlcədən yükləyici ilə bir div qoymalısınız, buna bənzər bir şey:

AreaForLoader (fon: linear-gradient(90deg, #FF4E50 10%, #F9D423 90%); overflow: gizli; mövqe: sabit; sol: 0; yuxarı: 0; sağ:0; alt:0; z-index: 9999 ; )

Etməli olduğunuz son şey ön yükləyicini gizlətməkdir. Bunu etmək üçün aşağıdakı jQuery kodundan istifadə edə bilərsiniz:

$(pəncərə).on("yük", funksiya () ( $preloader = $(".loaderArea"), $loader = $preloader.find(".loader"); $loader.fadeOut(); $preloader. gecikmə(350).fadeOut("yavaş"); ));

Əslində, sizə lazım olan tək şey əvvəlcədən yükləyicilərinizə gözəl animasiya əlavə etməkdir. Həmçinin, mən bir neçə maraqlı önyükləyici nümunələri tapdım, ona görə də nəzər sala bilərsiniz:

Pluginlərdən istifadə edərək əvvəlcədən yükləyicinin yaradılması

Əvvəlcədən yükləyicilər və yükləmə çubuqları yaratmağın başqa yolları da var. Məsələn, gözəl yükləmə çubuğu yaratmaq üçün xüsusi NProgress.js plaginindən istifadə edə bilərsiniz və ya əvvəlcədən yükləyici qurucusundan istifadə edə bilərsiniz.

Yalnız bu iki şey əvvəlcədən yükləyicinin yaradılması ilə bağlı video dərslikdə yaxşı təsvir edilmişdir, ona görə də sizə bu video təlimatına baxmağı məsləhət görürəm:

Gününüz xeyir, əziz abunəçilər, oxucular və sadəcə saytımızın ziyarətçiləri! Bu materialı özüm üçün yeni bir istinad səviyyəsi ilə başlayıram, daha doğrusu 101 dərsümid edirəm ki, siz faydalı və zövq alacaqsınız. Ümumiyyətlə, istifadə Veb sayt üçün əvvəlcədən yükləyici müxtəlif animasiyalar və effektlər arasında məşhur bir mövzudur, lakin bir çoxunun çox çətin və əlverişsiz kodu olduğunu gördüm, ona görə də daha sadə bir şey yazmaq qərarına gəldim və bunun üçün istifadə etdim. jQuery.

Bu materialı nəzərə alaraq qeyd etmək istəyirəm ki, bu kodun icrası səhifə hər dəfə yenilənəndə işləyir və əgər səhifəni kliklədikdə və ya yüklədikdə bunu etmək lazımdırsa, saytdakı şərhlərdə yaza bilərsiniz, o zaman biz edə bilərik bu materialı daha ətraflı təhlil edin.

Beləliklə, kodu öyrənməyə başlamazdan əvvəl, mən sizin üçün bu dərsə ətraflı giriş olan bir video hazırladım, mətni oxumaq istəmirsinizsə və ya birdən hər hansı bir sualınız varsa baxa bilərsiniz.

İlk addım. HTML.

Başlanğıc üçün mən qətnaməsi olan bir şəkil çəkmək qərarına gəldim gif sayt üçün önyükləyicidən daha səmərəli istifadə etməyə imkan verən format. Bu şəkli qovluğa yüklədim img, harada və həmçinin adi şəkil yalan olacaq PNG Səhifə yükləndikdən sonra istifadə ediləcək.

İndi bu kodu uğurla emal etmək üçün lazımi üslubları və skriptləri daxil etməliyik. Kitabxananın bağlanması jquery.min.js, həmçinin skriptin özü load.js, önyükləyici kimi çıxış edəcək. Həmçinin, faylda olan üslubları da unutma demo.css.

Sonra biz yaradırıq div id ilə bloklayın yük skriptlə qarşılıqlı əlaqədə olacaq və bu effekti yerinə yetirəcək. Blok konteyneri yaratdıqdan sonra onun içinə bir şəkil, GIF animasiyamızı yerləşdiririk və bir az aşağı ixtiyari mətni göstəririk.

Tamamlayırıq HTML sadə görüntü çıxışı ilə kod PNG.

İkinci addım. jQuery.

Ssenari özü çox sadədir, şərhlərə ehtiyac olub-olmayacağını bilmirəm, amma düşünürəm ki, sualları az olması üçün hər halda yazacam. Yaxşı, birincisi, skript id tələblərini yerinə yetirən bir pəncərədə işləyir yük. İkincisi, funksiyadan istifadə edərək bu identifikatora gecikmə təyin edilir gecikmə in 2500 ms, bu effekt görünsün, ondan sonra funksiya gəlir solmaq məna ilə yavaş, bu, gecikmədən sonra saytın özünü göstərməyə imkan verir. Gördüyünüz kimi hər şey olduqca elementar və sadədir.

$(pəncərə).on("yük", funksiya () ( $("#yük").gecikmə(2500).fadeOut("yavaş"); ));

Üçüncü addım. CSS.

Skriptin düzgün işləməsi üçün bütün lazımi üslubları yazacağımız son addıma keçək. Dərhal qeyd etmək istəyirəm ki, bütün xüsusiyyətlər və dəyərlər (bəlkə də istisna olmaqla, fon, mətni hizalayın) identifikator yük və div yükləyin tələb olunur, əks halda heç bir şey sizin üçün düzgün işləməyəcək.

Heç kim veb sayt səhifəsinin, slayderin və ya digər məlumatların yüklənməsi üçün uzun müddət gözləməyi sevmir. Ancaq saytın gözləmə müddətini azaltmaq mümkün deyilsə (məsələn, interaktivdir və düzgün işləməsi üçün bütün skriptlər yüklənməlidir), yükləmə müddətini birtəhər işıqlandırmağa çalışmaq lazımdır.

Bunu etmək üçün cizgi preloaderlərdən istifadə edin.

Biz sizin üçün CSS3 və HTML5 və ya JQuery ilə hazırlanmış 20 maraqlı preloader seçmişik. Onlar istifadəçi təcrübəsini əhəmiyyətli dərəcədə yaxşılaşdıra bilərlər.

Siz qalereyalar, sürgülər, bloglar və s. üçün cizgi yükləmə göstəricilərindən istifadə edə bilərsiniz.

Budur CSS ilə hazırlanmış sadə və zərif yükləyicilər. Onlar asanlıqla istənilən veb-layihənin bir hissəsi ola bilərlər - sadəcə kodu kopyalayıb yapışdırın.

Və bu, CSS-də yaradılmış göy qurşağı şəklində şirəli ön yükləyicidir. Parlaq, dinamik, gənclik layihələri üçün uyğundur!

Və bu yükləmə göstəricisi kart dizaynı olan saytlar üçün yaxşı uyğun gəlir.

Bu gözəl preloader HTML və CSS-i birləşdirərək sehrli effekt əldə edir. Əla görünür və istənilən vebsaytda əla işləyə bilər.

Dinamik animasiya - kiçik bir topu hərəkət etdirən çox rəngli bloklar.

Bu, loqo, veb sayt adı və ya cəlbedici şüarla birləşdirilə bilən əla yükləyicidir. Veb saytınız üçün güclü brendinq elementinə çevriləcək.

Bu heyrətamiz CSS yükləyicisi müxtəlif layihələr və tətbiqlər üçün uyğundur. Sadə və zərifdir və onu iki kliklə saytınıza əlavə edə bilərsiniz.

Yalnız iki rəng və sadə formalar. Amma nə maraqlı animasiya! Bu preloader istənilən saytınızı bəzəyəcək.

Bu preloader şık, minimalist dizaynı olan dinamik layihələr üçün idealdır.

Yenə klassiklər, yenə kublar. Ancaq çox maraqlı bir animasiya bu yükləmə göstəricisini göz oxşayan edir.

Bu şəkil isə “gözümü çəkə bilmirəm” kateqoriyasındandır. Sadəcə heyranedici və istifadəçiləriniz üçün yükləmə vaxtını parlaqlaşdırmağa zəmanət verilir.

Tumblr kimi yükləmə göstəriciləri axtarırsınızsa, bunları yoxlayın! SVG nişanlarından istifadə edərək CSS-ə əsaslanan animasiya.

Və bunlar dairəvi interaktiv CSS3 önyükləyiciləridir. Siçanınızı ayrı-ayrı sahələrə aparın və maraqlı effektə baxın.

Pastel rənglərdə sadə və zərif animasiya. Qadın saytları üçün idealdır.

Və bu dəstdə siz zövqünüzə uyğun yükləmə animasiyasını seçə bilərsiniz. Bu saat olacaq, yoxsa sadəcə ağ dairələr?

Dönən düzbucaqlı formaları olan sadə yükləyici. İstənilən saytda həyata keçirmək asandır.

Və burada cizgi yükləyicilərinin bütün kolleksiyası var. Seçmək üçün çox şey var və hamısı asanlıqla istənilən veb-sayta inteqrasiya olunur.

Dairələri olan maraqlı preloader. Sonra onlar yenidən üçbucağa, sonra nöqtəli xəttə çevrilirlər.

Fərqli animasiyalar olan başqa bir göstəricilər toplusu. Bütün ön yükləyicilər dairə şəklindədir.

Bu animasiya mətn loqotipinin və ya hər hansı bir mətnin, məsələn, şirkətin adı və ya şüarının üzərinə yapışdırıla bilər.

Ümid edirik ki, bu kolleksiyada növbəti layihəniz üçün faydalı bir şey tapacaqsınız!