မြန်မာဘာသာ
မြန်မာဘာသာ
ပျင်းရိသောတင်ခြင်းသည် 0 က်ဘ်ဆိုက်သုံးစွဲမှုမြန်နှုန်းကိုတိုးတက်စေရန်, PHP 0 က်ဘ်ဆိုက်ဖွံ့ဖြိုးတိုးတက်မှုတွင်ပျင်းရိသောတင်ခြင်းကိုများသောအားဖြင့်ဓာတ်ပုံများ, အသံနှင့်ဗွီဒီယိုများနှင့်အခြားကြီးမားသောဖိုင်အရင်းအမြစ်များကိုနှောင့်နှေးစေခြင်းအတွက်အသုံးပြုလေ့ရှိသည်။
0 က်ဘ်ဆိုက် 0 ဘ်ဆိုဒ်များကိုတိုးတက်စေရန် PHP 0 ဘ်ဆိုဒ်များတွင်ပျင်းရိသော 0 န်ဆောင်မှုများကိုမည်သို့အကောင်အထည်ဖော်ရမည်ကိုသရုပ်ဖော်ရန်ဥပမာကိုဤဆောင်းပါးတွင်ဖော်ပြရန်ဥပမာသုံးပါလိမ့်မည်။
ပျင်းရိသော Lazy Loading ကိုအကောင်အထည်ဖော်ခြင်းသည်ပုံမှန်အားဖြင့် lazed loading, unveil.js များစသည်တို့ကိုပုံမှန်အားဖြင့် အသုံးပြု. မြန်မြန်ဆန်ဆန်အသုံးပြုနိုင်သည့် Plugress မှတစ်ဆင့်မူတည်သည်။
ပျင်းရိသော plugin ကိုအသုံးပြုပြီးပျင်းရိသောရုပ်ပုံတင်ခြင်းကိုအကောင်အထည်ဖော်ရန်ဥပမာကုဒ်ကိုဤတွင်ဖော်ပြထားသည်။
<!-- တည်နေ<head>tag ကိုအတွက်မိတ်ဆက်ခဲ့သည်Lazy Loadplugin စာကြည့်တိုက် -->
<script src="https://cdn.jsdelivr.net/npm/lazyload/lazyload.js"></script>
<!-- တည်နေ图片标签အလယ်ပိုင်း添加data-srcဉစ်စာပစ္စည်းများ，အစစ်အမှန်ပုံရိပ်လိပ်စာကိုထည့်ပါdata-srcအလယ်ပိုင်း，တစ်ချိန်တည်းမှာဆက်ပြောသည်lazyအမျိုးအစား -->
<img class="lazy" data-src="path/to/your/image.jpg" alt="နမူနာရုပ်ပုံ" />
<!-- ဖြစ်ပေါ်လာခြင်းLazy Loadပလပ်အင် -->
<script>
document.addEventListener("DOMContentLoaded", function() {
var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));
if ("IntersectionObserver" in window) {
let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
let lazyImage = entry.target;
lazyImage.src = lazyImage.dataset.src;
lazyImage.classList.remove("lazy");
lazyImageObserver.unobserve(lazyImage);
}
});
});
lazyImages.forEach(function(lazyImage) {
lazyImageObserver.observe(lazyImage);
});
}
});
</script>အထက်ပါနည်းလမ်းအားဖြင့်ပုံသည်အသုံးပြုသူ 0 င်းဒိုးထဲသို့ 0 င်ရောက်နိုင်သည့်အချိန်တွင်ပုံပေါ်ရှိပုံကိုသာတင်လိမ့်မည်။
ပျင်းရိသောတင်ခြင်းသည်ဓာတ်ပုံများအတွက်သာမကအသံနှင့်ဗွီဒီယိုအရင်းအမြစ်များအတွက်လည်းသင့်တော်သည်။ scrolling လုပ်ရန်စာမျက်နှာများကိုစောင့်ကြည့်လေ့လာခြင်းအားဖြင့် Element သည်ပြတင်းပေါက်အတွင်းရှိပြတင်းပေါက်အတွင်းရှိနှင့်အသံနှင့်ဗွီဒီယိုအကြောင်းအရာများကိုပြောင်းလဲခြင်းနှင့်ကစားခြင်းရှိမရှိဆုံးဖြတ်ပါ။
ဤတွင်ပျင်းရိသောဗွီဒီယို 0 င်ခြင်းဥပမာတစ်ခုမှာ -
<video controls muted loop autoplay preload="none" id="lazy-video" data-src="path/to/your/video.mp4"></video>
<script>
document.addEventListener("DOMContentLoaded", function() {
var lazyVideo = document.getElementById("lazy-video");
window.addEventListener("scroll", function() {
var rect = lazyVideo.getBoundingClientRect();
var inViewPort = (rect.top >= 0 && rect.bottom <= window.innerHeight);
if (inViewPort) {
lazyVideo.src = lazyVideo.dataset.src;
}
});
});
</script>ဥပမာတွင်ဗွီဒီယို tag သည်အရင်းအမြစ်များကိုအလိုအလျောက်တင်ခြင်းကိုရှောင်ရှားရန် Preload ကိုအသုံးပြုသည်။ အသုံးပြုသူသည်စာမျက်နှာကို scroll လုပ်သည့်အခါဗွီဒီယို 0 င်းဒိုးထဲသို့ 0 င်ရောက်သောအခါဗွီဒီယိုသည်စာမျက်နှာ၏ကန ဦး တင်ဆောင်လာသောဖိအားကိုထိထိရောက်ရောက်လျှော့ချရန်စတင်ဖွင့်လှစ်လိမ့်မည်။
Lazy Loading Technology သည် PHP ဝက်ဘ်ဆိုက်များမှအစကန ဦး တင်ဆောင်လာသောအရင်းအမြစ်များပမာဏကိုသိသိသာသာလျှော့ချနိုင်သည်။ ဤဆောင်းပါးသည်ဥပမာ - ပျင်းရိသောရုပ်ပုံများနှင့်အသံနှင့်ဗွီဒီယိုများကိုပျင်းရိသော loading နည်းလမ်းကိုပြသသည်။ developer များက 0 က်ဘ်ဆိုက်၏ 0 က်ဘ်ဆိုက်တွင် 0 က်ဘ်ဆိုက်၏စွမ်းဆောင်ရည်ကိုပိုမိုကောင်းမွန်အောင်ပြုလုပ်ရန်လိုအပ်သည်။
