Məzmunun tənbəl yüklənməsi. Şəkillərin tənbəl yüklənməsi. B-tənbəl plagin. Tənbəl yükləmədən istifadə edirsiniz?
Hər hansı bir veb saytın işləməsinin vacib bir hissəsi istifadəçinin brauzerinə yükləmə sürətidir. Yalnız bir qayda var - nə qədər sürətli, bir o qədər yaxşıdır. Layihəni optimallaşdırmaq həmişə mümkün deyil və burada bəzi fəndlər köməyimizə gəlir. Bu gün biz saytdakı şəkillərin “tənbəl yüklənməsi” haqqında danışacağıq və jQuery plaginindən Lazy Load istifadə edəcəyik.
Lazy Load-un necə işlədiyinin ən bariz və ən yaxşı nümunəsi istənilən sosial şəbəkənin lentidir. Prinsip özü sadədir: istifadəçi səhifəni sürüşdürdükcə şəkilləri tədricən yükləyin. Bir az nəzəriyyəyə girsəniz, HTML səhifəsini açdığınız zaman o, iki mərhələdə yüklənir. Birincisi, sənədin strukturu yüklənir, ikincisi, daxil edilmiş fayllar (bizim vəziyyətimizdə şəkillər) yüklənir. Lazy Load data:image;base64 vasitəsilə yaradaraq, bizim şəkillərin əvəzinə minimal çəkiyə malik dummy şəkillər əlavə edir və sürüşdürən zaman o, artıq əsas media məzmununu yükləyir. Bu yolla səhifə yükləmə müddəti azalır, bu çox yaxşıdır!
MƏNBƏLƏR
Addım 1. HTMLBeləliklə, skriptləri birləşdirərək başlayaq:
Səhifəyə şəkillər əlavə edək:
İşarələmə əlavə edərkən genişlik və hündürlük atributlarını təyin etmək vacibdir, əks halda skript işləməyəcək və ya şəkil üslublarında eni və hündürlüyü təyin etməyəcək.
Addım 2. JSİndi HTML sənədini yüklədikdən sonra yeni metodu çağırırıq:
$("img.lazyImg").lazyload((
effekt: "fadeIn"
});
});
Plugin bir neçə faydalı parametrə malikdir:
- hadisə - şəkili yükləməyə başlamaq üçün hadisə (klikləyin və ya sürüşdürün);
- effekt - ekran animasiyası (show və ya fadeIn);
- konteyner - şəkillərin axtarılacağı konteyneri müəyyənləşdirir;
- yer tutucu - bu parametrdə öz yertutanınızı təyin edə bilərsiniz.
lazım olmadıqda bütün məzmunu səhifəyə yükləməkdən imtina etməkdir. Bu, məlumatın yüklənmədiyini göstərən marker tətbiq edir, lakin lazım gələrsə, onu yükləmək lazımdır.
Tənbəl yükləmədən istifadə edərək, saytdakı şəkillər və digər materiallar asinxron şəkildə, daha dəqiq desək, veb-səhifənin görünən fraqmenti tam yükləndikdən sonra və ya eksklüziv olaraq brauzer pəncərəsinin görünən hissəsi göstərildikdə yüklənir. Məsələn, ziyarətçi səhifənin sonuna keçməzsə, aşağıda yerləşən şəkillər yüklənməyəcək.
Tənbəl yükləmə bir çox resursda, xüsusən də çoxlu şəkilləri olanlarda aktualdır. Yüksək keyfiyyətli fotoşəkilləri olan istənilən onlayn xidmətə baş çəkin və saytın yalnız ekranınızda görünən fotoşəkilləri necə yüklədiyinə diqqət yetirin və aşağı diyirlədiyiniz zaman yeni fotoşəkillər ekranınızda görünən kimi yüklənməyə başlayır. Siz sürüşdürdükcə yer tutucular yüksək keyfiyyətli şəkillərlə əvəzlənir.
Çox vaxt səhifənin müəyyən bir fraqmentinin hər kəsə görünmədiyi hallar olur, lakin onun emalına və ya materialın ötürülməsinə çoxlu vəsait sərf olunur. Məhz o zaman tənbəl yükləmə haqqında düşünməyin vaxtıdır ki, bu da gizli elementlərin onlara baxmaq və ya istifadə etmək lazım olana qədər yaradılmasının və yüklənməsinin qarşısını alır.
Qeyddə. Tənbəl yükləmə , tərəfindən aktivləşdirilir və tərəfindən nəzarət edilən hadisələr tərəfindən yaradılır. Buna görə də, asinxron yükləmədən istifadə etməzdən əvvəl nəzərə almaq lazımdır ki, funksiya JS-i olmayan istifadəçilər üçün əlçatan olmayacaq və axtarış motoru robotları skript tərəfindən gizlədilən məzmunu görməyəcək.
İndi tənbəl yükləməni seçməyiniz üçün iki yaxşı səbəb haqqında danışaq:
Yuxarıda göstərilənlərə əsaslanaraq, tənbəl yükləmənin veb saytın performansını əhəmiyyətli dərəcədə yaxşılaşdırdığı qənaətinə gələ bilərik.
Lazy Loading növləriSaytın performansını yaxşılaşdırmaq üçün şəkillər və məzmun üçün tənbəl yükləmə skripti yaratmalısınız. Bunu necə etmək üçün bir çox variant var.
Şəkillər üçün 5 Tənbəl Yükləmə SeçimləriŞəkillər üçün ən çox yayılmış və hazır tənbəl yükləmə həlləri haqqında danışaq.
Sadələşdirilmiş versiyada bu tənbəl yükləmə skripti img teqində src atributunu data-src ilə əvəz edir:
data-src atributlarını ehtiva edən img elementləri . Şəkillər yükləndikdən sonra keçidlərdən istifadə edərək rəvan göstərilir:
img (şəffaflıq: 1; keçid: qeyri-şəffaflıq 0.3s; ) img (şəffaflıq: 0; )
JavaScript daha sonra src atributunu bütün img teqlərinə ötürür və nəticədə data-src atributunun dəyərini alır. Bütün şəkillər yükləndikdən sonra data-src img-dən silinir:
ForEach.call(document.querySelectorAll("img"), funksiya(img) ( img.setAttribute("src", img.getAttribute("data-src")); img.onload = function() ( img.removeAttribute( "data-src");
David Walsh, həmçinin JavaScript uğursuzluğu halında, səmərəli və tətbiqi sadə olan bir ehtiyat təmin etdi. Bununla belə, onun funksionallığı veb səhifə sürüşdürüldükdə yükləməyə imkan vermir. Bu o deməkdir ki, ziyarətçinin onlara “çatıb-çatmadığından” asılı olmayaraq brauzer bütün şəkilləri yükləyir. Bəli, geri qaytarma səhifəni daha sürətli göstərməyə imkan verir, çünki şəkillər HTML-dən sonra yüklənir, lakin trafikə qənaət olmayacaq.
Texnika standart CSS və HTML-in təkmilləşdirilməsi kimi JS-dən istifadə edən tənbəl yükləməni nəzərdə tutur. Proqressiv təkmilləşdirmə, hətta onların nümayişinə cavabdeh olan JavaScript deaktiv edilmiş və ya skriptin işləməsinə mane olan xəta görünsə belə, şəkillərin istifadəçilərə göstərilməsini təmin edir.
Proqressiv təkmilləşdirmə bir sıra üstünlüklərə malikdir:
Osborne həlli haqqında ətraflı məlumat əldə edə bilərsiniz.
№ 3. Sadə JS istifadə edərək bLazy.js plaginiBu skript yüngüldür, asinxron yükləməni həyata keçirir və trafikə və server sorğularına qənaət etmək üçün çoxlu şəkillərlə işləyir. Onun istifadəsi təmin edir:
Standart icra. İşarələmə:
img etiketi dəyişdirilməlidir:
JavaScript: standart bLazy çağırışını təyin edin və seçimlər xəritəsindən istifadə edərək obyekti konfiqurasiya edin:
Var bLazy = new Blazy(( //seçimlər ));
№ 4. Lazy Load XT jQuery plaginiÖz tənbəl yükləmə skriptinizi rahat yazmaq üçün əla plagin. Qeyd edək ki, jQuery plagininin tam versiyası var, burada videoları, iframeləri və src atributunu ehtiva edən digər teqləri asinxron yükləmə vasitəsilə yükləyə bilərsiniz və yalnız sadə tənbəl yükləməyə həsr olunmuş sadələşdirilmiş versiya mövcuddur.
Saytda plaqindən istifadə etmək üçün jquery.lazyloadxt.js (sadələşdirilmiş versiya) və ya jquery.lazyloadxt.extra.js (uzatılmış) qeyd edərək, bağlama teqindən əvvəl jQuery kitabxanasını əlavə etməlisiniz:
Bütün plaqini istifadə etməməyə imkan verən alternativ bir seçim də var - yüngül jqlight.lazyloadxt.min.js skripti:
Şəkillərdə src-ni data-src atributu ilə əvəz edin:
Plugin avtomatik olaraq aktivləşdirilə bilər və ya özünüz edə bilərsiniz. Bunu etmək üçün sadəcə daxil edin:
$(elementlər).lazyLoadXT();
Lazy Load XT jQuetry çoxlu sayda əlavələr əlavə edir. Məsələn:
Texnikanın üstünlükləri:
Bu linkdən istifadə edərək bütün əlavələrə və seçimlərə baxa bilərsiniz.
№ 5. Craig Buckler tərəfindən bulanıq şəkilYəqin ki, bəzi saytlarda məqalənin əsas şəklinin əvvəlcə bulanıq olduğunu, lakin sonra aydın, yüksək keyfiyyətli təsvirin yükləndiyini müşahidə etmisiniz. Bulanıqlıq effekti metodundan istifadə edərək fotoşəkilləri yükləmək üçün bir neçə seçim var. Ən yaxşılarından biri Craig Bucklerdir.
Texnikanın üstünlükləri bunlardır:
Kodu GitHub saytının repozitoriyasından yükləyə bilərsiniz.
Əvvəlcə jQuery kitabxanasını daxil etməlisiniz:
Metodun mahiyyəti tələb olunan div elementini sol fayldan AJAX istifadə edərək hədəf səhifəyə yükləməkdir.
Portfolio 
Daha çox göstər...
Hər şey olduqca sadə və aydındır. Lakin id=”smartPortfolio” ilə div-ə diqqət yetirməlisiniz, çünki onlar üçüncü tərəf sənədlərindən məzmunun yüklənməsi üçün cavabdeh olan ən vacib skriptdədirlər. Portfelin “konteyneri” SmartPortfolio-dur. MoreButton – kliklədikdə başqa portfel fraqmentini yükləyən düymədir. LoadingDiv – portfel tam açıldıqda və ya hər hansı bir xəta baş verərsə, mətnin göstəriləcəyi səhifənin bir hissəsidir.
Məsələn, bu məqaləni oxuyanların çoxu skripti serverə yükləmək əvəzinə brauzerdəki indeks faylı vasitəsilə sınaqdan keçirəcək. Siz xəta bildirişi alacaqsınız. Zəif bir İnternet bağlantısı varsa, faylları yükləmək daha uzun sürəcək. Buna görə də, istifadəçiyə yükləmənin davam etdiyini bildirən mesaj yazmaq və ya şəkil əlavə etmək vacibdir.
Budur skriptin özü, onu bağlamaq üçün kodu bağlayan əsas etiketdən əvvəl daxil etməlisiniz:
Var lazyload = lazyload || (); (function($, lazyload) ( "ciddi istifadə edin"; var səhifə = 2, buttonId = "#moreButton", loadingId = "#loadingDiv", konteyner = "#smartPortfolio"; lazyload.load = function() ( var url = "./pages/" + page + ".html"; $(loadingId).show(); !response ||. response.trim() == "NONE") ( $(buttonId).fadeOut(); $(loadingId).text("Portfolio tam yükləndi"); return; ) appendContests(response); cavab) ( $(loadingId).text("Bağışlayın, səhifəni yeniləyin."); $(buttonId).show(); ).appendTo($(konteyner));
Veb resursun strukturunda kliklədikdə məlumatların yüklənəcəyi səhifələr səhifələr qovluğunda yerləşir. İçərisində 3 fayl var, sonuncusu boşdur. Bu skript məntiqi ilə təmin edilir. İçindəki yol belə görünür:
Var url = "./pages/" + səhifə + ".html";
Ancaq fərqli bir yoldan istifadə edərkən onu skriptin özündə əvəz etmək vacibdir. Əgər başqa identifikatorlardan istifadə etsəniz, eyni şey edilməlidir:
ButtonId = "#moreButton", loadingId = "#loadingDiv", konteyner = "#smartPortfolio";
Şəkillər səhifəyə iki əsas yolla yüklənir: HTML etiketi vasitəsilə və CSS xassəsindən istifadə edərək background-image . Beləliklə, biz əvvəlcə etiket nümunəsinə baxacağıq və sonra CSS fon şəkillərinə baxacağıq.
Səhifəyə şəkillər daxil etmək üçün bəzi sadə HTML işarələmələri ilə başlayaq.
Tənbəl yüklənmiş şəkillər üçün işarələmə demək olar ki, eynidir.
İkinci addım şəklin vaxtından əvvəl yüklənməsinin qarşısını almaqdır. Brauzer şəklin yüklənməsini işə salmaq üçün img teqinin src atributundan istifadə edir. Və bu görüntünün birinci və ya mininci olmasının fərqi yoxdur. Brauzer işarələmədə src atributunu tapsa, əhatə dairəsindən kənarda olsa belə, dərhal şəkli yükləməyə başlayır.
Şəklin yüklənməsini gecikdirmək üçün siz şəklin URL-ni src atributundan başqa bir atributda, məsələn data-src-də yerləşdirməlisiniz. Və src atributu boş olduğundan, brauzer bu şəkli yükləməyəcək.
Şəkilin dərhal yüklənməsinin qarşısını aldığımız üçün, təsvirin nə vaxt yüklənməsi lazım olduğunu brauzerə bildirmək üçün bizə bir yol lazımdır. Əks halda, heç vaxt baş verməyəcək. Bunu etmək üçün, görüntünün (bizim vəziyyətimizdə onun yer tutucusu boz düzbucaqlıdır) görünən sahədə olub olmadığını yoxlayırıq və sonra yükləyirik.
Təsvirin əhatə dairəsində olub-olmadığını müəyyən etməyin iki yolu var. Gəlin bu nümunələrin hər birinə kodları vasitəsilə baxaq.
Birinci üsul. JavaScript hadisələrindən istifadə edərək şəkil yüklənməsini işə salın
Bu üsul aşağıdakı hadisələr üçün işləyicilərdən istifadə edir: sürüşdürün, ölçüsünü dəyişdirin və orientationChange. Sürüşdürmə hadisəsi istifadəçinin səhifəni vərəqlədiyi zaman onun cari mövqeyini müəyyənləşdirir. Ölçü və orientationChange hadisələri eyni dərəcədə vacibdir. Ölçü dəyişdirmə hadisəsi brauzer pəncərəsinin ölçüsü dəyişdirildikdə, orientationChange hadisəsi isə cihazın oriyentasiyası landşaftdan portret rejiminə və yenidən geriyə dəyişdikdə işə salınır.
Ekran dəyişikliklərini aşkar etmək və ekranda göstərilməli olan şəkillərin sayını hesablamaq üçün bu üç hadisədən istifadə edəcəyik. Bütün bunlardan sonra onları yükləyəcəyik.
Bu hadisələrdən hər hansı biri baş verdikdə, səhifədə hələ yüklənməmiş bütün şəkilləri tapırıq. Bu şəkillərdən tam olaraq brauzerin görünən sahəsində olanları seçirik. Seçim şəklin yuxarı ofsetinin, sənədin cari yuxarı mövqeyinin və pəncərənin hündürlüyünün hesablamaları əsasında aparılır. Beləliklə, görünüş pəncərəsində bir şəkil görünsə, biz onun URL-ni data-src atributundan seçib src atributuna keçirəcəyik, onda brauzer şəkli yükləyəcək.
Nəzərə alın ki, biz tənbəl sinifə malik bütün şəkilləri seçmək üçün JavaScript-dən istifadə edirik. Şəkil yükləndikdən sonra biz bu sinfi siləcəyik, çünki tədbiri işə salmaq lazım deyil. Və bütün şəkillər yükləndikdən sonra bütün hadisə idarəçilərini siləcəyik.
Unutmayın ki, səhifəni geri çevirdiyimiz zaman sürüşdürmə hadisəsi dəfələrlə işə salınır. Beləliklə, performansı yaxşılaşdırmaq üçün biz skriptimizə tənbəl yükləmənin icrasını tənzimləyən kiçik bir fasilə əlavə edirik ki, o, brauzerdə eyni başlıqda işləyən digər tapşırıqları bloklamasın.
Bu yanaşmanın işlək bir nümunəsidir:
Beləliklə, bu yazıda bir görüntünün tənbəl yüklənməsinin birinci üsulunu müzakirə etdik və növbəti məqalədə başqa bir üsulu müzakirə edəcəyik.
Yaxşı bir veb sayt tez yüklənməlidir. Bu məqam həm veb-saytların yaradılması zamanı, həm də mövcud veb-saytların təhlili və optimallaşdırılması zamanı nəzərə alınmalıdır. İnternet layihəsinin səhifələrini yükləyərkən ziyarətçilər çox gözləməyi sevmirlər.
Bu yazıda biz Javascript-də “şəkillərin tənbəl yüklənməsi”ndən istifadə edərək saytın yüklənməsinin “sürətləndirilməsi” haqqında danışacağıq və tanınmış mootools və jQuery çərçivələri üçün tətbiq nümunələri təqdim edəcəyik. Bu, xüsusilə yüksək keyfiyyətli şəkillərdən istifadə edən saytlara (xəbər portalları, fotoqrafiyaya həsr olunmuş saytlar, dizayn, clipart, sosial şəbəkələr, həcmli bloqlar və s.)
Mootools, jQuery istifadə edərək javascript istifadə edərək şəkillərin tənbəl yüklənməsiŞəkilləri yükləyərkən bizi hansı çətinliklər gözləyir? Şəkli normal yükləyərkən, pozulmuş və ya çatışmayan şəkil varsa və ya şəkil başqa mənbədən yüklənibsə və ya şəkil “çox yavaş” yüklənirsə, sayt donur.
Biz cari şəkli alana və ya dəqiqəlik fasilə müddəti bitənə qədər yükləməyə davam etməyəcək. Ziyarətçi nə görür? Tez-tez - heç bir şey, sadəcə ağ ekran və ya saytın fraqmentli hissəsi. Saytın belə bir “hiyləsinə” dözəcəkmi və bir daha qayıdacaqmı?
Şəkillərin tənbəl yüklənməsindən istifadə etməklə bunun qarşısını ala bilərik. Eyni zamanda, "tənbəl yükləmə" metodundan istifadə edən şəkillər saytın əsas məzmunu tam yükləndikdən sonra asinxron şəkildə, təsadüfi qaydada yüklənir və ziyarətçiyə onu maraqlandıran məlumatları oxumağa və baxmağa başlamaq imkanı verir. . Vizual olaraq, ziyarətçinin gözü ilə bu, səhifənin yüklənməsini əhəmiyyətli dərəcədə "sürətləndirir".
Javascript-də şəkillərin tənbəl yüklənməsi ideyasıFikir, ümumiyyətlə, sadədir. “domready” javascript-də belə bir hadisə var. Bu, HTML sənədinin tam strukturunu qəbul edərkən və hətta səhifə tam yüklənməmişdən əvvəl baş verir. Beləliklə, bu hadisə baş verdikdən sonra biz tələb olunan şəkillərin siyahısını alırıq, hər bir təsvirin src atributunu "sıfırlayırıq", onun üçün bir dəyər təyin edirik, məsələn, çapa: #. Şəklin Src ayrı bir şəkil atributunda saxlanılır, məsələn, longDesc . Css qaydası təyin edərək şəkli gizlədirik: görünmə: gizli.
Səhifə window.onload hadisəsindən istifadə edərək tam yükləndikdən sonra hər bir şəkil öz doğma src atributuna “qaytarılır” (bu, mahiyyət etibarilə orijinal şəklin “yüklənməsinə” səbəb olur). Şəkillər bir-birinin ardınca səhifədə “görünməyə” başlayır.
Tənbəl yükləmə ideyasını təkmilləşdirəkZiyarətçinin gördüyü şəkillərin yüklənməsini gecikdirsəniz nə olar? Ekranın görünən hissəsində? Və lazım olduqda, ziyarətçi sürüşdürmə düyməsini istifadə etdikdə, qalanını yükləyin?
Başqa? Ziyarətçiyə səhifədə nəyinsə baş verdiyini əyani şəkildə göstərmək yaxşı olardı. Məsələn, təxirə salınmış şəkillər yüklənir. Bunu etmək üçün, sadəcə olaraq, təsvirdən dərhal sonra bir span elementi daxil edin, ona css sinifinin preloaderini təyin edin və elementi css daxilində stilləndirin.
Sonra fonu tematik, intuitiv dinamik yükləmə şəklinə, məsələn, gif formatında təyin edin. İndi, şəkil yükləmə obyekti hadisəsi baş verdikdə, cari şəkil tam yükləndikdən sonra span.preloader elementini çıxarın və şəkilə css qaydasını təyin edərək şəklin özünü göstərin: görünmə: görünən;
Javascript-də şəkillərin tənbəl yüklənməsinin həyata keçirilməsiAncaq burada bir nömrəli problem ortaya çıxır. Bu heyranediricidi! Ancaq indiyə qədər heç bir brauzer şəkil obyekti üçün yükləmə hadisəsini düzgün dəstəkləmir! Hadisə kortəbii şəkildə baş verir.
Nəticədə, şəkillər ya görünür, ya da ümumiyyətlə görünmür, hətta eyni səhifənin müxtəlif yüklənməsi zamanı eyni təsvir: hadisə ümumiyyətlə baş verməyə bilər və ya daha əvvəl, şəkil tam yüklənməmişdən əvvəl baş verə bilər.
Şəkil obyekti üçün yükləmə hadisəsinin təqlid edilməsiBeləliklə, düşündükdən sonra belə bir nəticəyə gəldik ki, təsvir yalnız uzunluq və hündürlük atributları: eni, hündürlüyü 0-dan fərqli olduqda yüklənmiş sayılır. Ancaq burada, həmişə olduğu kimi, İnternet Explorer-dən məmnun qaldım, əgər bir şəkil yükləmək üçün uğursuz cəhd olarsa, onun "standartını" qırmızı xaç ilə "əvəz edir", onun da uzunluğu və hündürlüyü var.
Şəkil obyektinin xassələrini daha da araşdıraraq aşkar etdik ki, biz də tam xassəni yoxlamalıyıq - bu, təsvirin tam yüklənib-yüklənilmədiyini göstərir. Bundan əlavə, Webkit mühərrikində qurulmuş Safari və Google Chrome, onların fikrincə, şəklin yüklənməsindən asılı olmayaraq məmnun qaldılar - bunun heç bir fərqi yoxdur, tam həmişə doğrudur;
Beləliklə, hər bir şəkil üçün səhv, onabort hadisələrini idarə etməli və onlar baş verərsə (yükləmə xətası olarsa) şəklin eni və hündürlüyü atributlarını 0 dəyərləri təyin etməlisiniz. Beləliklə, sonda biz müəyyən vaxt intervalında təsvir obyektinin bu üç xassəsini yoxlayırıq.
Tam = doğru olan kimi və eni, hündürlüyü 0-dan fərqli olduqda, şəkil tamamilə yüklənir və pozulmur. Lakin, sonsuz interval hadisələrini "istehsal etməmək" üçün, biz cari şəkil üçün interval yoxlama hadisəsini ləğv edəcəyimiz maksimum vaxt miqdarını təyin edəcəyik, təsvirin əldə edilə bilməyəcəyini güman edəcəyik və biz bunu gizlədəcəyik. onu yükləmək üçün obyekt.
Biz həmçinin bütün şəkilləri iki qrupa ayıracağıq, ziyarətçinin ekranının görünən sahəsində olanlar, səhifə tam yükləndikdən dərhal sonra onları yükləməyə əlavə edəcəyik və görünməyən sahədə olanlar. ekranda, biz bu şəkilləri onscroll hadisəsi baş verdikdə - ziyarətçi siçan sürüşdürməsindən istifadə etdikdə yükləyəcəyik.
Mootools və jQuery-də şəkillərin tənbəl yüklənməsinin həyata keçirilməsiİcazə verin, Mootools və jQuery-də şəkillərin tənbəl yüklənməsinin iki tətbiqini verim.
Mootools 1.1 – 1.4.4:
/** Qara#FFFFFF tərəfindən gecikmiş şəkil yüklənməsi **/ loadWait = 30000; loadCheck = 300; preloadObjects = "img"; notImagesLoaded = ; excludeImages = false; //excludeImages = "istisna" funksiyası getScreenHeight())( var myHeight = 0; if(typeof(window.innerHeight) == "nömrə") ( //Qeyri-IE myHeight = window.innerHeight; ) else if(sənəd. documentElement && (document.documentElement.clientHeight || document.documentElement.clientHeight))( //IE 6+ "standartlara uyğun rejimdə" myHeight = document.documentElement.clientHeight; ) else if(document.body && (document.body.). clientHeight ||. document.body.clientHeight)) ( //IE 4 uyğun myHeight = document.body.clientHeight; ) return myHeight funksiyası preloadOther())( var l = notImagesLoaded.length; var currentExists = false; for(var i); = 0;< l; i ++){ var item = notImagesLoaded[i]; if(item){ loadImage(item); currentExists = true; }; }; if(!currentExists){ notImagesLoaded = ; window.removeEvent("scroll",preloadOther); }; }; function imagesPreloader(){ $$(preloadObjects).each(function(item){ if(item.nodeName.toLowerCase() == "img" && (typeof excludeImages == "undefined" || excludeImages == false || (item.className.indexOf(excludeImages) == -1))){ item.longDesc = item.src; item.src = "#"; var preloaderElt= new Element("span",{ styles:{"display":"inline-block"}}); $(preloaderElt).className = "preloader "+item.className; preloaderElt.inject(item,"before"); loadImage(item); }; }); window.addEvent("scroll",preloadOther); }; function loadImage(item){ var pos = $(item).getPosition(); var ItemOffsetTop = typeof pos == "object" && typeof pos.y != "undefined" ? pos.y: 0; var documentScrollTop = $(window).getScrollTop(); var scrHeight= getScreenHeight(); if(ItemOffsetTop loadWait){ $clear(this.storePeriod); this.storePeriod = false; if(typeof this.loadedCount != "undefined" && notImagesLoaded){ notImagesLoaded = false; }; $(this).setStyles({"display":"none","visibility":"hidden"}); if(typeof $(this.previousSibling).destroy == "function"){ $(this.previousSibling).destroy(); } else { $(this.previousSibling).remove(); } } }.periodical(loadCheck,item); } else { if(typeof item.loadedCount == "undefined"){ item.loadedCount = notImagesLoaded.length; notImagesLoaded = item; }; }; }; $(window).addEvent("domready",imagesPreloader);
jQuery 1.3.2 – 1.7.1:
/** Qara#FFFFFF tərəfindən gecikmiş şəkil yüklənməsi **/ loadWait = 30000; loadCheck = 300; preloadObjects = "img"; notImagesLoaded = ; excludeImages = false; funksiya getScreenHeight())( var myHeight = 0; if(typeof(window.innerHeight) == "nömrə") ( //Non-IE myHeight = window.innerHeight; ) else if(document.documentElement && (document.documentElement. clientHeight ||. document.documentElement.clientHeight))( //IE 6+ "standartlara uyğun rejimdə" myHeight = document.documentElement.clientHeight; ) if(document.body && (document.body.clientHeight || document.body). clientHeight )) ( //IE 4 uyğun myHeight = document.body.clientHeight; ) return myHeight; ) funksiyası preloadOther())( var l = notImagesLoaded.length; var currentExists = false; for(var i = 0; i)< l; i ++){ var item = notImagesLoaded[i]; if(item){ loadImage(item); currentExists = true; }; }; if(!currentExists){ notImagesLoaded = ; jQuery(window).unbind("scroll",preloadOther); }; }; function imagesPreloader(){ jQuery(preloadObjects).each(function(){ var item = this; if(item.nodeName.toLowerCase() == "img" && (typeof excludeImages == "undefined" || excludeImages == false || (item.className.indexOf(excludeImages) == -1))){ item.longDesc = item.src; item.src = "#"; item.alt = ""; var preloaderElt= jQuery(""); jQuery(preloaderElt).css({"display":"block"}); preloaderElt.className = "preloader "+item.className; jQuery(item).before(preloaderElt); loadImage(item); }; }); jQuery(window).bind("scroll",preloadOther); }; function loadImage(item){ var pos = jQuery(item).position(); var ItemOffsetTop = typeof pos == "object" && typeof pos.top != "undefined" ? pos.top: 0; var documentScrollTop = jQuery(window).scrollTop(); var scrHeight= getScreenHeight(); if(ItemOffsetTop loadWait){ clearInterval(item.storePeriod); item.storePeriod = false; if(typeof item.loadedCount != "undefined" && notImagesLoaded){ notImagesLoaded = false; }; jQuery(item).css({"display":"none","visibility":"hidden"}); jQuery(item.previousSibling).remove(); }; },loadCheck); } else { if(typeof item.loadedCount == "undefined"){ item.loadedCount = notImagesLoaded.length; notImagesLoaded = item; }; }; }; jQuery(document).ready(imagesPreloader);
Javascript-də şəkillərin tənbəl yüklənməsinin tətbiqi nümunələriQeyd: jQuery.noconflict() ilə uyğunluq rejimində istifadə üçün $ işarəsinin bütün hadisələri jQuery obyektinə parametrlərin ötürülməsi ilə əvəz olunur.
javascript parametrləri:
css parametrləri:
Şəklin yüklənməsini göstərən elementə stil vermək üçün sinifdən istifadə edin
Span.preloader (ekran: blok; fon: url(şəklin yüklənməsi yolu); )
Burada siz tam yüklənənə qədər şəklin “əvəzində” göstəriləcək elementi istədiyiniz kimi tərtib edə bilərsiniz. Bu span.preloader elementinə həmçinin CSS üslublarının yaradılmasını asanlaşdıracaq şəkil sinfinə uyğun əlavə sinif təyin ediləcək.
İzahat: bu o deməkdir ki, əgər təxirə salınmış yükləmə növbəsinə əlavə edilmiş şəkil sinif sinfinə malikdirsə ="bigImage" , o zaman yükləmə prosesini "vizuallaşdıracaq" "stub" span.preloader müvafiq olaraq sinif ="preloader bigImage" sinfinə malikdir. Əslində, təsvirə təyin ediləcək bütün qaydalar stub üçün tətbiq olunacaq. Nəticədə, şəkillərin tənbəl yüklənməsi ilə sayt səhifələrinin görünüşü dəyişməz olaraq qalır.
Tənbəl yükləmə hansı brauzerlərdə sınaqdan keçirilmişdir?IE 7,8,9, Firefox 3.6 – 10, Opera 11.61, Safari, Chrome ən son
Tənbəl yükləmənin həqiqətən işlədiyini necə yoxlaya bilərsiniz? Və şəkilləri səhifə yükləndikdən sonra yükləyir?Çılpaq gözlə olsa belə, həllimizi quraşdırdıqdan sonra saytın daha sürətli "yükləməyə" başladığını və tənbəl yükləmə üçün göstərilən şəkillərin yalnız cari səhifə tam yükləndikdən sonra "yükləndiyini" görəcəksiniz.
Ancaq tam əmin olmaq üçün, məsələn, Opera brauzerini yükləyin, nümunələrdən birini açın və səhifə tam yükləndikdən sonra və aşağı sürüşdürdükdən sonra şəkillərin yüklənməsinin brauzerinizin status çubuğunda vizual olaraq görünməsinə diqqət yetirin. (ünvan çubuğu) sürüşdürərkən ( Tələb olunan şəkillərin sayğacı dəyişir).
JQuery, Mootools istifadə etmədən tənbəl yükləmənin təmiz javascript versiyası olacaqmı?Bəli, lakin əlavə funksiyaların yazılmasını və sınaqdan keçirilməsini tələb edir, buna görə də bir az sonra görünəcək.
- Tərcümə
- Dərslik
Şəkillərin sürətli və hamar yüklənməsi yaxşı veb interfeysinin vacib komponentlərindən biridir. Bundan əlavə, bu cür layihələr üçün dizaynda böyük fotoşəkillərdən istifadə edən getdikcə daha çox sayt meydana çıxır, qrafiklərin düzgün yüklənməsinə nəzarət etmək xüsusilə vacibdir. Bu məqalədə təsvirin yüklənməsini idarə etməyə kömək edəcək bir neçə texnika təsvir edilir.
Hər bir şəkil üçün konteynerdən istifadə Saytdakı istənilən şəkilə tətbiq oluna bilən sadə üsul. İş ondadır ki, hər bir şəkil sətir-sətir yüklənməsinin qarşısını alan DIV-ə bükülür:
Konteynerdən istifadə edərək, təsvirin aspekt nisbətinə nəzarət edə bilərsiniz və həmçinin yükləmə göstəricisindən istifadə edə bilərsiniz, bu da şəkillər ağır olduqda çox rahatdır.
Məsələn, aspekt nisbətini 4:3 olaraq təyin etmək üçün aşağıdakı CSS-dən istifadə edə bilərsiniz:
Img_wrapper(mövqe: nisbi; üst doldurma: 75%; daşqın: gizli; ) .img_wrapper img( mövqe: mütləq; üst: 0; en: 100%; qeyri-şəffaflıq: 0; )
Şəklin yalnız tam yükləndikdən sonra brauzerdə göstərilməsini təmin etmək üçün şəkil üçün yükləmə hadisəsi əlavə etməli və hadisəni idarə etmək üçün JavaScript-dən istifadə etməlisiniz:
funksiya imgLoaded(img)( var $img = $(img); $img.parent().addClass("yüklənmiş"); );
HEAD teqinin içindəki funksiya kodu hər hansı jQuery və ya digər plaqindən sonra ən sonunda yerləşdirilməlidir. Şəkil tam yükləndikdən sonra o, səhifədə göstərilməlidir:
Img_wrapper.loaded img (şəffaflıq: 1; )
Şəklin hamar görünüşünün effekti üçün CSS3 keçidindən istifadə edə bilərsiniz:
Img_wrapper img( mövqe: mütləq; üst: 0; en: 100%; qeyri-şəffaflıq: 0; -webkit-keçid: qeyri-şəffaflıq 150ms; -moz-keçid: qeyri-şəffaflıq 150ms; -ms-keçid: qeyri-şəffaflıq 150ms; keçid: qeyri-şəffaflıq; 15)
Bu metodun canlı nümunəsi mövcuddur.
Prosesi idarə etmək üçün slideLoaded() funksiyasından istifadə edirik:
Funksiya slideLoaded(img)( var $img = $(img), $slideWrapper = $img.parent(), cəmi = $slideWrapper.find("img").uzunluq, faizYüklənmiş = null; $img.addClass("yüklənmişdir" "); var loaded = $slideWrapper.find(".loaded").length; if(loaded == total)( faizLoaded = 100; // INSTANTIATE PLUGIN $slideWrapper.easyFader(); ) else ( // YÜKLƏNƏN TƏRƏKKÜLƏYİ İZLƏMƏYİ faizYüklənmişdir = yüklənmiş/cəmi * 100);
Yüklənmiş şəkillərə yüklənmiş sinif təyin edilir və ümumi irəliləyiş göstərilir. Yenə də JavaScript hər şeydən sonra HEAD teqinin sonunda yerləşdirilməlidir.
var heroArray = [ "/uploads/hero_about.jpg", "/uploads/hero_history.jpg", "/uploads/hero_contact.jpg", "/uploads/hero_services.jpg" ]
Ziyarətçi sayta daxil olduqda, əsas səhifəni yüklədikdən sonra şəkillər önbelleğe yüklənməyə başlayır. Keşləmənin cari məzmunun nümayişinə mane olmamasını təmin etmək üçün pəncərənin yüklənməsi hadisəsinə JavaScript funksiyasını əlavə etməlisiniz:
Function preCacheHeros())( $.each(heroArray, function())( var img = new Image(); img.src = this; )); $(pəncərə).load(funksiya())( preCacheHeros(); ));
Bu üsul saytın istifadəsini yaxşılaşdırır, lakin serverə əlavə yük qoyur. Belə bir funksiyanı həyata keçirərkən bunu nəzərə almaq lazımdır. Bundan əlavə, saytdakı ziyarətçilərin mümkün yollarını və istifadəçinin ən çox ziyarət etdiyi səhifələrdə yerləşən şəkilləri önbelleğe almaq lazımdır. Sayt vasitəsilə bu cür yolları başa düşmək üçün trafik statistikasını təhlil etmək lazımdır.
Qeyd etmək lazımdır ki, şəklin URL-i src-də deyil, data-src-də göstərilmişdir. Bu, brauzerin şəkli dərhal yükləməməsi üçün lazımdır. Əvəzində src baza64 şəffaf GIF pikseli ilə yüklənir ki, bu da serverə gediş-gəlişlərin sayını azaldır.
İstənilən hadisə baş verdikdə src dəyərini data-src-ə dəyişmək qalır. JavaScript sizə şəkilləri tədricən yükləməyə imkan verir:
lazyLoad())( var $images = $(".lazy_load"); $images.each(function())( var $img = $(bu), src = $img.attr("data-src") funksiyası ; $ img .on("yük",imgLoaded($img)) .attr("src",src )); $(pəncərə).load(funksiya())( lazyLoad(); );
Nəticə Saytda şəkillərin yüklənməsini idarə etməyin ən yaxşı yolu yoxdur. Hər bir konkret halda, müvafiq metodu seçmək, həmçinin uyğun olduqda bir neçəsini birləşdirmək lazımdır. Diqqət etməli olduğunuz əsas məqamlardan biri performans və trafikdir. Sadəcə olaraq, ilk növbədə bunun saytın istifadəçisi üçün necə daha rahat olacağını düşünməlisiniz.