Dangasa yuklash. Tasvirlarni dangasa yuklash

• Tarjima

Bugungi kunda veb-saytlarni tez yuklash tezligiga asosiy to'siq bu tasvirlardir. Bu, ayniqsa, elektron tijorat loyihalari uchun xosdir. Ularda odatda juda "og'ir" tasvirlar sahifa tarkibining asosiy qismini tashkil qiladi. Bu odatda foydalanuvchi brauzeri sahifani ko'rsatish uchun bir necha megabayt grafik ma'lumotlarni yuklab olishiga olib keladi. Bunday vaziyatda sahifa yuklanishini qanday tezlashtirish mumkin? Bu savolga javob - biz bugungi kunda tarjimasini nashr etayotgan materialning mavzusi.

Umumiy qoidalar Masalan, Walmart veb-saytidagi Bosh sahifa bo'limining bosh sahifasini ko'rib chiqing.

Ko'p rasmlarni o'z ichiga olgan sahifa

Bu sahifani yaratish uchun qancha rasm yuklanganligi:

Tasvirlar sahifa yaratilganda yuklanadi

Ko'rib turganingizdek, 137 ta rasm mavjud! Bu shuni anglatadiki, sahifani ko'rsatish uchun zarur bo'lgan va tarmoq orqali uzatiladigan ma'lumotlarning 80% dan ortig'i grafik fayllar shaklida bo'ladi.

Keling, sahifa yuklanganda bajarilgan tarmoq so'rovlarini tahlil qilaylik:

Sahifa yaratilganda qilingan tarmoq so'rovlari

Bunday holda, loyiha kodini bo'lish natijasida paydo bo'lgan fayllar mumkin bo'lganidan kechroq yuklanadi. Buning sababi, avval cp_ny.bundle asosiy to'plamini yuklab olishingiz kerak. Agar o‘tkazish qobiliyati bo‘yicha bir-biri bilan raqobatlashayotgan 18 ta tasvir bo‘lmaganida, bu to‘plam tezroq yuklanishi mumkin edi.

Uni qanday tuzatish kerak? Buni haqiqatan ham "tuzatish"ning iloji yo'q, lekin tasvir yuklashni optimallashtirish uchun ko'p narsalarni qilishingiz mumkin. Veb-sahifalarda ishlatiladigan tasvirlarni optimallashtirish uchun ko'plab yondashuvlar mavjud. Ular orasida turli xil grafik fayl formatlaridan foydalanish, ma'lumotlarni siqish, xiralashgan animatsiya texnikasidan foydalanish va CDN dan foydalanish kiradi. Men tasvirlarni "dangasa yuklash" haqida to'xtalib o'tmoqchiman. Xususan, biz ushbu texnikani React veb-saytlarida qanday amalga oshirish haqida gaplashamiz, lekin u JavaScript mexanizmlariga asoslanganligi sababli uni har qanday veb-loyihaga birlashtirish mumkin.

Eksperimental loyiha Ushbu juda oddiy React komponenti tasviridan boshlaylik:

Class Image PureComponent-ni kengaytiradi ( render() ( const ( src ) = this.props; return ; } }
U URLni xususiyat sifatida oladi va undan HTML img elementini ko'rsatish uchun foydalanadi. Mana JSFiddle da tegishli kod. Quyidagi rasmda ushbu komponentni o'z ichiga olgan sahifa ko'rsatilgan. Esda tutingki, unda ko'rsatilgan rasmni ko'rish uchun siz sahifa mazmunini aylantirishingiz kerak.

Tasvirni aks ettiruvchi komponentli sahifa

Ushbu komponentda tasvirlarni dangasa yuklash texnikasini amalga oshirish uchun siz quyidagi uchta qadamni bajarishingiz kerak:

Rasmni yuklagandan so'ng darhol bermang.

Konfiguratsiya sahifa mazmunini ko'rish sohasida tasvirning ko'rinishini aniqlash vositalarini anglatadi.

Tasvirni ko'rish maydonida ekanligi aniqlangandan keyin ko'rsating.

Keling, ushbu bosqichlarni ko'rib chiqaylik 1-qadam Ushbu bosqichda tasvir yuklangandan so'ng darhol ko'rsatilmaydi.

Render() (qaytish ; }

2-qadam Bu erda biz tasvirning ko'rish maydoniga kirgan paytini aniqlashga imkon beruvchi mexanizmlarni o'rnatamiz.

ComponentDidMount() ( this.observer = new IntersectionObserver(() => ( // bu erda uchinchi bosqich uchun kod), ( root: document.querySelector(".container") )); this.observer.observe(this . elementi .... render() (qaytish). this.element = el) />; )
Keling, ushbu kodni ko'rib chiqaylik. Bu erda nima qilingan:

• img elementiga ref atributi qo'shildi. Bu keyinchalik komponentni qayta ko'rsatmasdan turib, src-dagi rasm havolasini yangilash imkonini beradi.
• Yangi IntersectionObserver namunasi yaratildi (bu haqda quyida gaplashamiz).
• IntersectionObserver ob'ektiga observe(this.element) konstruksiyasi yordamida tasvirni kuzatish so'raladi.

IntersectionObserver nima? "Kerishish" so'zi "kesishma" deb tarjima qilinganini va "kuzatuvchi" "kuzatuvchi" ekanligini hisobga olsak, siz ushbu ob'ektning rolini allaqachon taxmin qilishingiz mumkin. Agar siz MDN-da bu haqda ma'lumot qidirsangiz, Intersection Observer API veb-ilovalarga elementning kesishishidagi o'zgarishlarni uning ota-onasi yoki hujjat ko'rish maydoni bilan asinxron kuzatish imkonini berishini bilib olishingiz mumkin.

Bir qarashda, API ning ushbu xarakteristikasi unchalik aniq ko'rinmasligi mumkin, lekin aslida uning tuzilishi juda oddiy. IntersectionObserver misoli bir nechta parametrlardan o'tadi. Xususan, biz ildiz parametridan foydalandik, bu bizga konteyner sifatida qaraydigan DOM ildiz elementini, qaysi elementning chegara bilan kesishishini bilishimiz kerakligini ko'rsatishga imkon beradi. Odatiy bo'lib, bu sahifaning ko'rinadigan qismi (ko'rish oynasi) joylashgan maydondir, lekin men uni JSFiddle iframe elementida joylashgan konteynerdan foydalanish uchun aniq belgilab qo'ydim. Bu keyinchalik iframe elementlaridan foydalanish uchun mo'ljallanmagan bitta imkoniyatni ko'rib chiqish uchun qilingan.

IntersectionObserver-dan element qachon ko'rinadigan bo'lishini aniqlash uchun nima uchun onScroll va getBoundingClientRect() kabi an'anaviy usullardan ko'ra ko'proq mashhurroqdir, chunki IntersectionObserver mexanizmlari asosiy oqimdan tashqarida ishlaydi. Biroq, IntersectionObserver elementning konteyner bilan kesishishini aniqlagandan so'ng chaqiriladigan qayta qo'ng'iroq tabiiy ravishda asosiy oqimda bajariladi, shuning uchun uning kodi juda og'ir bo'lmasligi kerak.

3-qadam Endi biz maqsad elementning (bizning holimizda this.element) ildiz konteyneri (bizning holimizda bu div element.container) bilan kesishishi aniqlanganda chaqiriladigan qayta qo'ng'iroqni o'rnatishimiz kerak.

This.observer = new IntersectionObserver(entries => (entries.forEach(entry => ( const ( isIntersecting ) = entry; if (isIntersecting)) ( this.element.src = this.props.src; this.observer = this.observer .disconnect( ) ); ( root: document.querySelector(".container") )); ....
Kesishma aniqlanganda, kirishlar elementlari massivi qayta qo'ng'iroqqa uzatiladi, bu berilgan chegaraning kesishishi aniqlangan barcha maqsadli elementlarning holatining oniy tasvirlari to'plamiga o'xshaydi. isIntersecting xossasi kesishish yo‘nalishini bildiradi. Agar ko'rilgan element ildiz elementining tashqarisidan tushsa, bu haqiqatdir. Agar element ildiz elementini tark etsa, u noto'g'ri bo'ladi.

Shunday qilib, element konteynerning pastki chegarasini kesib o'tgandek ko'rinsa, men uning src xususiyatini qo'lda o'rnatdim va endi kerak bo'lmagan monitoringni o'chirib qo'ydim.

4-qadam (maxfiy) Endi ishimizning to'rtinchi, yashirin bosqichida siz natijaga qoyil qolishingiz va muvaffaqiyatdan xursand bo'lishingiz mumkin. Mana biz gaplashgan narsalarni umumlashtiradigan kod.

Tasvirlarni dangasa yuklashdan foydalanish natijasi

Ammo, agar biz erishgan narsalarga diqqat bilan qarasak, bu erda juda yaxshi bo'lmagan narsa borligi ayon bo'ladi. Buni ko'rish uchun men tarmoq ulanishini sekinlashtirgan holda sahifani tezda aylantirdim.

Tez aylanayotganda sahifa harakati va tarmoqqa ulanish tezligi sekinlashadi

Biz rasmni u allaqachon ko'rinadigan maydonga yetgandan keyingina yuklaganimiz sababli, foydalanuvchi sahifani aylantirib, rasm egallagan maydonni va, albatta, tasvirning o'zini ko'rishning imkoni yo'q. yuklangan. Veb-saytlar tez Internetga ulangan oddiy kompyuterlardan ko'rilganda, bu muammo tug'dirmaydi. Ammo ko'plab zamonaviy foydalanuvchilar veb-saytlarga telefonlaridan tashrif buyurishadi, ba'zida ular 3G tarmoqlaridan yoki undan ham yomoni, EDGE ulanishlaridan foydalanadilar.

Biroq, bu muammoni hal qilish unchalik qiyin emas. Buni amalga oshirish mumkin, chunki Intersection Observer API dasturchiga ildiz elementining chegaralarini kengaytirish yoki qisqartirish imkoniyatini beradi (bizning holatlarimizda .container elementi). Ushbu imkoniyatdan foydalanish uchun ildiz konteyneri sozlangan joyga bir qator kod qo'shing:

Rootmargin: "0px 0px 200px 0px"
RootMargin xususiyatida strukturasi elementlarning chekinish parametrlarini sozlash uchun foydalaniladigan CSS qoidalariga mos keladigan satr yozish kerak. Bizning holatda, biz tizimga elementning konteyner bilan kesishishini aniqlash uchun ishlatiladigan pastki chegarani 200 pikselga oshirish kerakligini aytamiz. Bu shuni anglatadiki, element ildiz elementining pastki chegarasidan 200 piksel past bo'lgan maydonga tushganda tegishli qayta qo'ng'iroq chaqiriladi (bu erda standart qiymat 0).

Mana bu texnikani amalga oshiradigan kod.

Tasvirlarni dangasa yuklashni yaxshilash

Natijada, biz ro'yxatning 4-bandiga o'tsak, rasm sahifaning ko'rish mumkin bo'lgan maydonidan 200 piksel past bo'lgan maydonga yuklanadi.
Endi qilinishi kerak bo'lgan hamma narsa bajarilganga o'xshaydi. Ammo bu unday emas.

Rasm balandligi muammosi Agar siz yuqoridagi GIF-larni diqqat bilan ko'rib chiqqan bo'lsangiz, tasvir yuklangandan keyin aylantirish paneli "sakrash" qilayotganini payqagan bo'lishingiz mumkin. Yaxshiyamki, bu muammoni hal qilish qiyin emas. Buning sababi shundaki, tasvirni aks ettiruvchi element dastlab 0 balandlikka ega bo'lib, tasvir yuklangandan so'ng 300 pikselga teng bo'lib chiqadi. Shuning uchun, muammoni hal qilish uchun tasvirga height=(300) atributini qo'shish orqali elementni belgilangan balandlikka o'rnating. ? Aslida, aniq natijalar turli holatlarga, jumladan, mijozning tarmoqqa ulanish tezligiga, CDN-ning mavjudligiga, sahifadagi tasvirlar soniga va ildiz elementi bilan kesishishni aniqlash uchun qo'llaniladigan qoidalarga qarab juda farq qiladi. . Boshqacha qilib aytganda, rasmlarni dangasa yuklashning o'z loyihangizga ta'sirini baholash uchun uni o'zingiz amalga oshirish va sinab ko'rish yaxshiroqdir. Ammo, agar siz hali ham tasvirlarni dangasa yuklash bizga nima berganini ko'rishni xohlasangiz, bu erda bir nechta Lighthouse hisobotlari mavjud. Birinchisi optimallashtirishdan oldin, ikkinchisi - keyin hosil bo'ladi.

Teglar qo'shing

Internetni ko'rib chiqayotganda, har bir kishi veb-sayt sahifalarini iloji boricha tezroq yuklashni xohlaydi, hech kim ma'lum bir sahifani yuklash uchun uzoq vaqt kutishni yoqtirmaydi; Bundan tashqari, sahifada juda ko'p rasmlar mavjud bo'lganda, bu kutish sezilarli darajada kechiktirilishi mumkin. Sahifada rasmlarning mavjudligi sahifani tashrif buyuruvchilar uchun yanada jozibador qiladi, ko'rinishni oshiradi va oxir-oqibat saytingizga trafikni oshirishga yordam beradi. Biroq, biz tasvirlarning mavjudligi sahifalarni sezilarli darajada og'irlashtirishi va ularning yuklanish vaqtini oshirishini hisobga olishimiz kerak.

Sahifani sekin yuklash veb-saytingizning SEO optimallashtirishiga salbiy ta'sir qiladi. Hozirgi kunda ko'pgina saytlar o'z postlarida GIF yoki PNG tasvirlaridan foydalanadilar. Bu tasvirlar JPEG rasmlardan kattaroqdir va natijada sahifalarni yuklash ko'proq vaqt olishi mumkin. Har bir bunday tasvirni yuklab olish uchun alohida HTTP so'rovi talab qilinadi, bu ham yuklab olishni tezlashtirmaydi.

Ushbu muammoni hal qilish uchun "dangasa" yoki kechiktirilgan yuklash qo'llaniladi, unda faqat foydalanuvchiga kerak bo'lgan rasmlar yuklanadi. Ushbu maqolada sahifani yuklash tezligini sezilarli darajada yaxshilaydigan oltita eng yaxshi bepul WordPress dangasa yuklash plaginlari tasvirlangan.

1. a3 Lazy Load - eng yaxshi dangasa yuklash plagini

Plagin blogingizni tezlashtiradi va shaxsiy kompyuterlar, planshetlar va mobil telefonlarda sahifaning vizual sezgirligini yaxshilaydi.

a3 Lazy Load saytga yuk yaratmaydi va mobil qurilmalar uchun qulay. Veb-saytingizni tezlashtiradigan foydalanish uchun qulay plagin. Saytingiz qanchalik og'ir elementlarga ega bo'lsa, plagin o'z ishini shunchalik yaxshi bajaradi va unumdorlikni oshirishni ko'rasiz.

• Barcha tasvirlar, gravatarlar, videolar va ramkalar uchun dangasa yuklash
• Yuklash effektlarini tanlash
• WooCommerce-ni qo'llab-quvvatlash
• Yuqori ishlash va past yuk
• Rasm va videolarni istisno qilishingiz mumkin
• JavaScript ulanishining zaxira nusxasini yarating
• Barcha brauzerlarni qo'llab-quvvatlaydi

2.Lazy Load

Bu WordPress.com, TechCrunch jamoasi va Jek Goldman tomonidan ishlab chiqilgan dangasa yuklash tasvir plaginidir. U oddiy kodga ega, shuning uchun u server resurslarini ortiqcha yuklamaydi.

Lazy - plaginni o'rnatish va sozlash oson. Bu deyarli hech qanday sozlashni talab qilmaydi, o'rnatishdan so'ng darhol ishlay boshlaydi.

Plaginning asosiy xususiyatlari:

• Oddiy kod.
• WordPress tomonidan quvvatlanadi.
• Foydalanish oson.
• jQuery.sonar dan foydalanadi.

3. BJ Lazy Load

BJ - boshqa bepul dangasa yuklanadigan WordPress plaginidir, u kuzatilgan hududdagi barcha rasmlaringiz, eskizlaringiz, gravatarlaringiz va iframe elementingiz tarkibini "stub" bilan almashtiradi. Tasvirlarning o'zlari brauzer oynasida paydo bo'lgandan keyin yuklanadi. Ushbu usul sizga sahifa yuklanishini tezlashtirish va foydalanuvchi trafigini tejash imkonini beradi.

Plagin mobil qurilmalar bilan ishlash imkonini beruvchi sezgir dizaynga ega. Mobil qurilmalarda tasvirlar avtomatik ravishda ekran o'lchamiga mos ravishda o'lchanadi. Ushbu plagin Retina uchun tayyor, ya'ni u Apple qurilmalarida ishlashi mumkin.

Plaginning asosiy xususiyatlari:

• Tasvirlarni "stub" bilan almashtirish.
• Rasmlar hajmini avtomatik o'zgartirish.
• Retinani qo'llab-quvvatlash.
• Foydalanuvchi trafigini tejash.

4. jQuery Lazy Load

jQuery - bu Java skriptidan foydalanadigan bepul dangasa yuklash plaginidir. Java skripti tasvirlarni faqat brauzer oynasining ko'rinadigan qismida bo'lganda yuklaydi.

jQuery - bu WordPress omboridan juda mashhur plagin.

Plaginning asosiy xususiyatlari:

• Mashhurlik.
• Java skriptidan foydalanish.
• Kichik hajm.
• Deyarli hech qanday sozlamalar talab qilinmaydi.

5. Kengaytirilgan Lazy Load

Bu juda yaxshi dangasa yuklovchi WordPress plaginidir, u foydalanuvchi sahifani pastga aylantirganda va tasvir maydoniga yetganda tasvirlarni yuklaydi. Ushbu plagin jQuery skriptidan ham foydalanadi. Bu yuklash vaqtini qisqartirish imkonini beradi, chunki matn avval yuklanadi va tasvirlar uchun yangi HTTP ulanishi yaratiladi.

Sahifalar bir vaqtning o'zida yuklanmaganligi HTTP ulanishlar sonini kamaytirish va serverdagi yukni sezilarli darajada kamaytirish imkonini beradi.

Plaginning asosiy xususiyatlari:

• jQuery skriptlaridan foydalanadi.
• HTTP ulanishlar sonini kamaytirish imkonini beradi.
• Sahifani yuklashni tezlashtirishga imkon beradi.
• Ikki xil sozlamalar mavjud.

6. Lazy Loadni oching

Bu jQuery skriptidan foydalanadigan juda kichik plagin. U faqat 0,6 KB hajmdagi skript yordamida tasvirlarni yuklaydi. Plagin ulanishlar sonini kamaytirish orqali serverdagi yukni kamaytirish imkonini beradi.

Rasm sahifaning HTML kodiga ma'lumotlardan foydalangan holda yuklanadi: URL sxemasi, bu dangasa yuklash uchun zarur bo'lgan takroriy rasmga ehtiyojni yo'q qiladi.

Plaginning asosiy xususiyatlari:

• jQuery skriptlaridan foydalanadi.
• Engil skriptlardan foydalanadi.
• Ma'lumotlar bilan sxemadan foydalanadi: URL.
• Ulanishlar sonini kamaytirish imkonini beradi.

Xulosa

Ushbu maqolada WordPress sayt sahifalarini tezroq yuklashga yordam beradigan bepul WordPress dangasa yuklash tasvir plaginlari tasvirlangan. Ushbu plaginlar yordamida siz shunchaki mo''jizalar yaratishingiz mumkin. Izohlarda qanday dangasa yuklash tasvir plaginidan foydalanayotganingizni yozing.

Lazy loading JavaScript-da yozilgan jQuery dasturiy plaginidir, u (katta) veb-sahifalarga rasmlarni yuklashni kechiktiradi. Shunday qilib, foydalanuvchining ko'rish maydonida bo'lmagan rasmlar foydalanuvchi sahifani pastga aylantirmaguncha ochilmaydi. Oldindan yuklash bilan bir xil narsa, faqat teskari.

Ko'p katta rasmlarni o'z ichiga olgan saytlarda "dangasa yuklash" dan foydalanish sahifani yuklashni tezlashtirishga imkon beradi - brauzer barcha ko'rinadigan tasvirlar ochilishi bilanoq to'liq ochilish haqida xabar beradi. Ba'zi hollarda ushbu moduldan foydalanish serverdagi yukni kamaytirishga yordam beradi.

Dastur YUI ImageLoader Utility deb nomlangan tasvirlarni yuklash moduli asosida yozilgan, dastur muallifi Mett Mlinak.

Effektni ko'rish uchun sahifalarni pastga aylantiring.

Hozircha manba kodini yig‘ib bo‘lmadi. Men uning ustida ishlayapman.

Dastur qanday ishlaydi?

Dastur plagini jQuery (nima uchun?) va Brandon Aaron tomonidan ishlab chiqilgan, endi jQuery belgilariga kiritilgan o'zgaruvchilarga asoslangan. Ularni sarlavhada ko'rsating:

$("img").lazyload();

Shundan so'ng, foydalanuvchi ularga kirishi bilan barcha rasmlar yuklanadi.

Javob beruvchi o'rnatish

Dasturda har bir tafsilotni shaxsan kuzatishni xohlaydigan pedantlar uchun imkoniyatlar mavjud. Rasmni ochish chegarasini o'rnatishingiz mumkin - sukut bo'yicha bu qiymat 0 ga teng, ya'ni rasm faqat sahifada paydo bo'lganda ochiladi.

$("img").lazyload(( pol: 200 ));

Agar siz chegara qiymatini 200 ga o'rnatsangiz, ochilishdan oldin 200 pikselli rasm allaqachon yuklanadi.

Tasvir to'ldiruvchisi

Shuningdek, yuklashni boshlash uchun rasm va hodisa uchun joy ushlagichni o'rnatishingiz mumkin. To'ldiruvchida rasmning manzili bo'lishi kerak. Dasturiy ta'minot moduli 1*1 piksel o'lchamdagi shaffof, kulrang va oq tasvirlarni taqdim etadi.

$("img").lazyload(( to'ldiruvchi: "img/grey.gif" ));

Yuklashni boshlash uchun tadbir

Hodisa jQuery-da o'rnatiladi - bu har qanday bo'lishi mumkin, shu jumladan bosish yoki sichqoncha harakati. Siz o'zingizning variantlaringizni ishlab chiqishingiz mumkin. Odatiy bo'lib, dastur foydalanuvchi sahifani pastga aylantirguncha kutadi - keyin brauzer oynasida rasmlar paydo bo'ladi. Foydalanuvchi joy ushlagichni bosmaguncha rasmlar yuklanishini oldini olish uchun buni bajaring:

$("img").lazyload((
to'ldiruvchi: "img/grey.gif",
voqea: "klik"
});

Effektlardan foydalanish

Odatiy bo'lib, plagin rasmning to'liq yuklanishini kutadi va keyin uni ko'rsatish uchun show() funksiyasini chaqiradi. Ushbu harakatlar ketma-ketligiga istalgan effektni qo'shishingiz mumkin. Quyidagi kod parchasi kuchsizlanishni qanday qo'shishni ko'rsatadi. Namoyish sahifasida uning qanday ko'rinishini ko'rishingiz mumkin.

$("img").lazyload((
to'ldiruvchi: "img/grey.gif",
effekt: "fadeIn"
});

Ichki tasvirni saqlash

Shuningdek, plaginni aylantiriladigan konteynerlarda saqlangan tasvirlar uchun ishlatishingiz mumkin - buning uchun koddagi konteynerni jQuery ob'ekti sifatida ko'rsatish kifoya. Gorizontal va vertikal konteynerlar uchun demo variantlari mavjud.

#konteyner (balandligi: 600px; toʻldirilishi: aylantirish; ) $("img").lazyload(( toʻldiruvchi: "img/grey.gif", konteyner: $("#container")
});

Agar tasvirlar tartibsiz ko'rsatilsa

Sahifani aylantirgandan so'ng, dastur yuklab olinmagan rasmlarni qidirishni boshlaydi, qidiruv paytida rasm ko'rinib qolganligini tekshiradi. Odatiy bo'lib, birinchi ko'rinadigan rasm topilganda qidiruv to'xtaydi - sahifadagi rasmlarning tartibi html kodidagi bilan bir xil deb taxmin qilinadi. Biroq, ba'zi belgilash opsiyalarida bu unchalik emas - bu holda siz rasmlarni ko'rsatish tartibini tartibga soluvchi muvaffaqiyatsizlikni cheklash funktsiyasidan foydalanishingiz kerak.

$("img").lazyload(( muvaffaqiyatsizlik chegarasi: 10
});

Agar funktsiya qiymatini 10 ga qo'ysak, dastur 10 ta ko'rinadigan rasmni topgandan keyin qidirishni to'xtatadi. Agar sahifa murakkab tartibga ega bo'lsa, bu erda juda katta raqamni kiritishingiz kerak.

Siz tasvirlarni dangasa yuklashni tashkil qilishingiz mumkin, garchi bu dasturning asosiy funksiyasiga kiritilmagan. Agar siz quyidagi kodni qo'shsangiz, dastur sahifa to'liq yuklanishini kutadi, nafaqat uning html elementlari, balki rasmlari ham. Yuklab olish tugagandan besh soniya o'tgach, ko'rinmas rasmlar ham avtomatik ravishda yuklab olinadi. Demo versiyasini tekshirishingiz mumkin.

$(function() ( $("img:katlama ostida").lazyload(( to'ldiruvchi: "img/grey.gif", voqea: "sport"
});
});
$(window).bind("load", function() ( var timeout = setTimeout(function() ($("img").trigger("sport")), 5000); ));

Bugun hammasi shu! E'tiboringiz uchun rahmat.

Ko'p odamlar allaqachon dangasa yuklash tushunchalarining afzalliklaridan foydalanayotgan bo'lsa-da, ularning ba'zilari hali ham dangasa yuklash haqida hayratda. Agar siz dangasa yuklash va u nima qilishi mumkinligi haqida ozgina tasavvurga ega bo'lsangiz, unda ushbu maqola siz uchun. Biz dangasa yuklash haqida bilishingiz kerak bo'lgan hamma narsani ko'rib chiqdik. Shunday qilib, maqolani o'qing va boshlang!

Dangasa yuklashning afzalliklari bilan boshlashdan oldin, dangasa yuklash nima ekanligini va u qanday ishlashini bilib olaylik.

Dangasa yuklash nima?

Dangasa yuklash - bu biz ma'lum bir ob'ektni yuklashni kechiktira olmaydigan mexanizm bo'lib, biz buni amalga oshirishimiz mumkin bo'lgan ma'lum bir nuqtaga qadar video yoki shunchaki tasvir bo'lishi mumkin. Oddiy qilib aytganda, dangasa yuklash barcha ob'ektlarni sukut bo'yicha yuklashdan ko'ra, ob'ektlarni talab bo'yicha yuklashni anglatadi. Avtomatik yuklab olish muammosi juda zerikarli. Bu sayt tezligini oshiradi, shuning uchun ob'ektlar tezroq yuklanadi.

Dangasa yuklashning SEOga ta'siri Google keshida ko'rinmaydi.

Google qidiruv tizimi dangasa yuklangan narsalarni ko'ra olmaydi. Ishonchi komil emas? Mana bir misol. Agar sizda bosh sahifaning pastki qismida mahsulot tasviri bo'lgan saytingizning biron bir qismi bo'lsa va sizda dangasa yuklash yoqilgan bo'lsa, ushbu bo'limni ajratib ko'rsatmaguningizcha ma'lum bo'lim yuklanmaydi. Natijada, bu sahifaning manba kodi ko'rsatilmasligiga olib keladi. shunday, u Google keshida ko'rinmaydi .

Dangasa yuklangan ob'ektlar boshqa joyga ko'chiriladi

Dangasa yuklab olingan kontent qidiruv tizimlari tomonidan indekslanmaydi. Ushbu kontent indekslanmaganligi sababli, bu ushbu elementlar uchun reytingning pastroq bo'lishiga olib keladi. Shunday qilib, SEO jarayoni qidiruv natijalarida ko'rinishi uchun dangasa yuklangan kontentga tayanmaydi.

Dangasa yuklash tufayli saytingiz optimallashtirishni yo'qotadimi?

Bu afsona! Veb-saytni optimallashtirish dangasa yuklash bilan bog'liq emas. Ajax skripti hali ham ishlaydi. Faqatgina farq shundaki, u fonda ishlaydi. Sayt tezroq yuklanadi! Bunga hech qanday shubha yo'q! Saytni optimallashtirishga ta'sir qilmaydi.

Dangasa yuklash sizga qanday yordam berishi mumkin, sizni "kutish" hissi bilan bezovta qiladi?

Lazy loading - bu sizni hamma orzu qilgan narsaga olib boradigan mexanizm - yashin tezligida veb-sayt. To‘g‘risini aytaylik: hammamiz sabrsizlik bilan kontent yuklanishini kutamiz. Kechikish yuz berganda, hatto bir necha soniya ham veb-sahifadan chiqishimizga sabab bo'ladi. Dangasa yuklash bilan biz barcha kontentning yuklanishini kutishimiz shart emas.

Veb-sahifa ancha tez yuklanadi.

Sizga kerak bo'lgan kamroq resurslarni qanday yuklab olish mumkin, veb-sahifadagi barcha tarkibni keraksiz yuklab olish uchun joy yo'q. Bu sizning sahifangizni ancha tez yuklaydi.

WordPress-da dangasa yuklashdan qanday foydalanish mumkin?

Agar siz 5 ta bepul va yangilanishi mumkin bo'lgan to'liq ekranli tasvirlarni o'z ichiga olgan sahifada bo'lsangiz, WordPress postidagi faqat dastlabki bir nechta rasm yuklanadi, qolganlari esa sahifaning pastki qismiga o'tsangizgina yuklanadi. Shunday qilib, siz saytning har bir rasm uchun HTTP so'rovini yuborishining oldini olishingiz mumkin. Ko'p sonli HTTP so'rovlaridan qochish WordPress saytingiz uchun ko'p vaqtni tejashni anglatadi.

WordPress-dagi kontentga tezroq kirish

Da WordPress-da dangasa yuklash, shuningdek, barcha kontentga tezroq kirishingiz mumkin. , bir xil bo'lib qolsa-da, kontentni yuklash tezligi oshadi.

Kontentni keraksiz yuklab olishning oldini olish va ko'p ma'lumotlaringizni saqlash mumkin. Sizni qiziqtirgan tarkibni sahifaning pastki qismiga o'tish orqali kuzatish mumkin.

Endi siz dangasa yuklashning turli afzalliklariga amin bo'ldingiz, ularni saytingizda amalga oshirishingiz mumkin, maqsadingizga erishishga yordam beradigan bir nechta plaginlar mavjud.

Eng yaxshi dangasa yuklash plaginlari1. Tasvir dangasa yuk

Ushbu dangasa yuklash plagini an'anaviy dangasa yuklashning engil, vaznli o'zgarishidir. U retinaga mos keladigan displeylar bilan yuqori aniqlikdagi tasvirlarga xizmat ko'rsatadigan maxsus qo'llab-quvvatlash tizimiga ega. Image Lazy Load plaginida rasmlarni ko‘rishdan oldin sizga yetib boradigan piksellar sonini siqib, smartfonlarga tasvirlarni yuklash imkoniyatlari ham kiradi.

2. BJ Lazy Load

Ushbu dangasa yuklash plagini foydalanuvchilarga rasmlar va eskizlarni, Gravatarlarni, postlardagi ramkalarni tanlash imkonini beradi va kontentni to'ldiruvchi bilan almashtiradi. Muayyan to'ldiruvchini tanlashda siz turli sinflarga ega rasmlarni o'tkazib yuborishingiz mumkin. BJ Lazy Load shuningdek, turli xil optimallashtirilgan tasvir o'lchamlarini ta'minlaydi va avtomatik ravishda turli xil HiDPI ekranlari uchun HiDPI tasvirlarini taqdim etadi, masalan Apple-ning retinali displey.

3.

JQuery-ga turli xil tasvirlarni dangasa yuklashni qo'shadi. Ushbu plaginning eng yaxshi tomoni shundaki, uni ishlatish juda oson. Sizga kerak bo'lgan yagona narsa uni o'rnatish va faollashtirishdir. Siz tashrif buyurgan saytdagi rasmlar sahifaning pastki qismiga o'tishingiz bilan avtomatik ravishda yuklanadi. Tasvirlar yuklanishi uchun uzoq vaqt kutishingiz shart emas. Xuddi veb-sahifani ochganingizda va sahifaning pastki qismiga o'tsangiz, rasmlar allaqachon yuklangan!

Rasmlar sahifaga ikkita asosiy usulda yuklanadi: HTML tegi orqali va fon-image CSS xususiyatidan foydalanish. Shunday qilib, biz avval teg misolini ko'rib chiqamiz va keyin CSS fon rasmlarini ko'rishga o'tamiz.

Img yorlig'i yordamida tasvirlarni dangasa yuklash

Keling, sahifaga rasmlarni kiritish uchun oddiy HTML belgilaridan boshlaylik.

Dangasa yuklangan tasvirlar uchun belgilash deyarli bir xil.

Ikkinchi qadam tasvirni muddatidan oldin yuklamaslikdir. Brauzer tasvirni yuklashni boshlash uchun img tegining src atributidan foydalanadi. Va bu rasm birinchi yoki minginchi bo'ladimi, muhim emas. Agar brauzer belgilashda src atributini topsa, u amaldan tashqarida bo'lsa ham, darhol tasvirni yuklashni boshlaydi.

Rasmni yuklashni kechiktirish uchun siz rasmning URL manzilini src atributidan boshqa atributga, masalan data-src-ga joylashtirishingiz kerak. Va src atributi bo'sh bo'lgani uchun brauzer bu rasmni yuklamaydi.

Endi biz tasvirni darhol yuklashning oldini olganimiz sababli, brauzerga tasvirni qachon yuklash kerakligini aytishning qandaydir usuli kerak. Aks holda, bu hech qachon sodir bo'lmaydi. Buni amalga oshirish uchun biz tasvirning (bizning holatda, uning o'rnini bosuvchi kulrang to'rtburchaklar) ko'rinadigan sohada yoki yo'qligini tekshiramiz va keyin uni yuklaymiz.

Tasvirning ko'lamda ekanligini aniqlashning ikki yo'li mavjud. Keling, ushbu misollarning har birini kodlari orqali ko'rib chiqaylik.

Birinchi usul. JavaScript hodisalari yordamida tasvir yuklanishini ishga tushiring

Ushbu usul quyidagi hodisalar uchun ishlov beruvchilardan foydalanadi: aylantirish, o'lchamini o'zgartirish va orientationChange. O'tkazish hodisasi foydalanuvchining sahifani aylanib o'tayotganda uning joriy holatini aniqlaydi. O'lchamini o'zgartirish va orientationChange hodisalari bir xil darajada muhimdir. Brauzer oynasi o‘lchami o‘zgartirilganda o‘lchamni o‘zgartirish hodisasi ishga tushiriladi va qurilma orientatsiyasi landshaftdan portret rejimiga va yana orqaga o‘zgarganda orientationChange hodisasi ishga tushadi.

Ekrandagi o'zgarishlarni aniqlash va ekranda ko'rsatilishi kerak bo'lgan tasvirlar sonini hisoblash uchun biz ushbu uchta hodisadan foydalanamiz. Bularning barchasidan keyin biz ularni yuklaymiz.

Ushbu hodisalardan birortasi sodir bo'lganda, biz sahifadagi hali yuklanmagan barcha rasmlarni topamiz. Ushbu rasmlardan biz brauzerning ko'rinadigan qismida joylashgan rasmlarni tanlaymiz. Tanlash rasmning yuqori ofsetini, hujjatning joriy yuqori holatini va oynaning balandligini hisoblash asosida amalga oshiriladi. Shunday qilib, agar ko'rish oynasida rasm paydo bo'lsa, biz uning URL manzilini data-src atributidan tanlaymiz va uni src atributiga o'tkazamiz, keyin brauzer tasvirni yuklaydi.

Esda tutingki, biz dangasa sinfga ega bo'lgan barcha rasmlarni tanlash uchun JavaScript-dan foydalanmoqdamiz. Rasm yuklangandan so'ng, biz bu sinfni o'chirib tashlaymiz, chunki biz endi hodisani yoqishimiz shart emas. Va barcha tasvirlar yuklangandan so'ng, biz barcha hodisa ishlov beruvchilarini olib tashlaymiz.

Sahifani orqaga aylantirganimizda, aylantirish hodisasi ko'p marta o'chirilishini unutmang. Shunday qilib, unumdorlikni oshirish uchun biz skriptimizga dangasa yuklashning bajarilishini tartibga soluvchi kichik vaqtni qo'shamiz, shuning uchun u brauzerda bir xil mavzuda ishlaydigan boshqa vazifalarni bloklamaydi.

Mana bu yondashuvning amaliy misoli:

Shunday qilib, ushbu maqolada biz tasvirni dangasa yuklashning birinchi usulini muhokama qildik va keyingi maqolada biz boshqa usulni muhokama qilamiz.