لود تصاویر توسط پلاگین in-view.js
لود تصاویر توسط پلاگین in-view.js » در این مقاله آموزشی، بهبود کارایی و سرعت لود وب سایت با استفاده از in-view.js را آموزش خواهیم داد. سرفصلها عبارتند از: لود تصاویر پس از اسکرول کاربر، شروع بکار استفاده از پلاگین in-view.js، درج آدرس تصویر واقعی در اتریبیوت data-src و تعریف تابع ()inView و...

لود تصاویر توسط پلاگین in-view.js

Load images using in-view.js

پلاگین in-view.js برای بهبود سرعت لود تصاویر

 

بهبود کارایی و سرعت لود وب سایت با استفاده از in-view.js

در این آموزش چگونگی استفاده از in-view.js برای بهبود کارایی و سرعت لود وب سایت را شرح می دهیم. این پلاگین باعث می شود تصاویر آن بخشی از صفحه وب که بر اساس اسکرول کاربر، در حال نمایش است لود شوند و سایر تصاویر موجود در صفحه تا قبل از اسکرول کاربر به آن بخش لود نمی شوند. اینکار باعث افزایش سرعت لود سایت می شود. در حال عادی، هنگامی که آدرس یک وب سایت را در مرورگر وارد می کنیم، تمام تصاویر آن صفحه لود می شوند که مسلما باعث کاهش سرعت لود سایت خواهد شد.

 

اهمیت بهبود کارایی وب سایت:

بهینه بودن سرعت وب سایت شما اهمیت زیادی دارد. بویژه اگر بازدیدکنندگان آن وب سایت در کشورهای درحال توسعه ساکن باشند. زیرا در این کشورها، اینترنت سرعت چندانی ندارد و همچنین قیمت بسته های اینترنت بالا می باشد. با مراجعه به وب سایت dospeedtest.com می توانید لیستی از کشورهایی که دارای کمترین سرعت اینترنت در جهان هستند را مشاهده نمائید. همانطور که در وب سایت مذکور مشاهده می کنید، ایران در رتبه چهارم کندترین اینترنت جهان قرار دارد!

برای مشاهده سرعت لود وب سایت تان و رتبه بهینه بودن آن به وب سایت های معتبر و محبوب gtMetrix.com و یا tools.pingdom.com  مراجعه نمائید.

اقداماتی که می توانید برای بهبود سرعت لود وب سایت خود انجام دهید می تواند شامل: فشرده سازی فایل های js و css و نیز بهینه کردن تصاویر و… باشد. اما آیا این اقدامات کافی می باشد؟

لطفا به تصویر زیر دقت کنید:

لود تمام المان های DOM پس از 11 ثانیه به اتمام می رسد

همانطور که در تصویر بالا مشاهده می کنید، یک صفحه وب، در حال لود کردن ۲۴ تصویر با اینترنت ۳G موبایل می باشد. مشخص است که لود تمام المان های DOM پس از ۱۱ ثانیه به اتمام می رسد! که بسیار کند می باشد. آن هم برای صفحه ای که فقط دارای تصویر و استایل های CSS می باشد. در این صفحه هنوز تبلیغات (ads) و اسکریپت های tracking و… درج نشده است!

بنابراین ما چگونه می توانیم سرعت لود وب سایت را در این حالت بهبود ببخشیم؟

لود تصاویر پس از اسکرول کاربر:

ما در صفحه وب خود چندین تصویر داریم. دلیل اینکه سرعت لود این صفحه کند است اینست که تمام تصاویر می خواهند بهنگام لود اولیه صفحه (initial page-load) بارگذاری شوند. در تصویر فوق دیدیم که لود تصاویر بصورت موازی (parallel) انجام نمی شوند. در صورتی که یک صفحه از وب سایت ما دارای چندین تصویر باشد، می توانیم تصاویر را بصورت ناهمگام (asynchronous) لود کنیم. بدین معنی که تا وقتی که کاربر به یک بخش از وب سایت اسکرول نکرده است، تصاویر آن بخش لود نشوند. در اینصورت به مرورگر اجازه می دهیم تا تصاویر بخش قابل مشاهده کاربر (viewable section) را در بار اول لود کند که باعث افزایش سرعت لود وب سایت می شود. با انجام اینکار در نهایت علاوه بر افزایش سرعت لود سایت، باعث صرفه جویی در پهنای باند (bandwidth) کاربران خواهد شد.

 

شروع بکار استفاده از پلاگین in-view.js:

برای ادامه آموزش in-view.js لطفا نگاهی به فایل index-starter.html بیاندازید. برای شروع باید سورس (src) تصاویر را با یک تصویر بسیار کوچک و سبک جایگزین کنیم (به منظور کاهش تعداد request های HTTP) ما از این تصویر کوچک بعنوان placeholder برای تصاویر واقعی (actual images) استفاده می کنیم.

درج آدرس تصویر واقعی در اتریبیوت data-src:

ما باید آدرس تصویر واقعی را در اتریبیوت data-src تعریف کنیم:

<figure class="post__image">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="./images/image-24.jpg" alt="" width="800" height="554">
</figure>
 

وقتی این تغییرات را در سورس صفحه وب خود انجام دادید و صفحه را refresh کنید، با تصاویر خالی (blank) مواجه می شوید که ابعاد آنها لزوما با ابعاد تصاویر واقعی شما یکسان نمی باشد.

تصاویر خالی (blank)

 

بنابراین باید استایل ها را اصلاح و آپدیت کنیم.

 

نگهداری ابعاد تصویر (image ratio):

تصاویری که ما می خواهیم در این مثال استفاده کنیم دارای ابعاد ۸۰۰*۵۰۰ پیکسل می باشند. برای بدست آوردن padding-top المان دربرگیرنده تصاویر (figure) به این روش اقدام می کنیم: ارتفاع تصویر (۸۰۰) را تقسیم بر طول آن (۵۰۰) می کنیم و نتیجه را در ۱۰۰% ضرب می کنیم. سپس باید position تصاویر را absolute تعریف کنیم و max-height آنها را برابر ۱۰۰% در نظر بگیریم:

 

figure {
   position: relative;
}
figure img {
   top: 0;
   left: 0;
   position: absolute;
   max-height: 100%;
}
figure:before {
   padding-top: 69.25%; // ( 554 / 800 ) * 100%
}
 

با تعریف استایل های فوق، ابعاد تصاویر باید درست شده باشند. با اینکه آدرس تصاویر واقعی هنوز توسط مرورگر قابل دسترسی نیستند زیرا در اتریبیوت data-src تعریف شده اند.

نگهداری ابعاد تصویر (image ratio)

 

قدم بعدی ما این است که توسط دستورات جاوااسکریپت، تصاویر واقعی را نمایش دهیم.

 

لود کردن تصاویر واقعی:

در این مرحله باید کتابخانه in-view.js را به صفحه وب سایت خود اضافه کنید. این پلاگین مشخص می کند که کدام بخش از صفحه در معرض دید کاربر می باشد. پس از افزودن رفرنس in-view.js نیاز است تا یک فایل سفارشی با نام دلخواه خود بعد از in-view.min.js در صفحه تعریف کنیم:

<script src="./js/in-view.min.js"></script>
<script src="./js/scripts.js"></script>

 

متدها و توابع (Methods & Functions):

پارامتر ورودی تابع ()inView:

کتابخانه in-view.js تابع inView() را در اختیار شما قرار می دهد که یک سلکتور بعنوان پارامتر ورودی می گیرد. در این مثال ما باید figure را بعنوان پارامتر آن تعریف کنیم. دلیل اینکه المان figure را بعنوان سلکتور برای تابع inView() تعریف می کنیم اینست که می خواهیم تعدادی کلاس را به منظور پیاده سازی transition برای آن تعریف کنیم. بصورت زیر:

inView('figure')

متد on در تابع inView:

سپس متد on را برای تابع فوق صدا می زنیم و رویداد enter را تعریف می کنیم. رویداد enter مشخص می کند که آیا المان در معرض دید کاربر (viewport) می باشد یا خیر. به همین ترتیب رویدادی داریم بنام exit که مشخص می کند آیا المان از دید کاربر خارج شده است یا خیر؟

 

inView( 'figure' ).on( 'enter', function( figure ) {

     var img = figure.querySelector( 'img' ); // 1

     if (  'undefined' !== typeof img.dataset.src ) { // 2

         figure.classList.add( 'is-loading' ); // 3

         // 4
         newImg = new Image();
         newImg.src = img.dataset.src;

         newImg.addEventListener( 'load', function() {

            figure.innerHTML = ''; // 5
            figure.appendChild( this );

            // 6
            setTimeout( function() {
               figure.classList.remove( 'is-loading' );
               figure.classList.add( 'is-loaded' );
            }, 300 );
         } );
     }
} );
 

کاربرد رویداد enter در تابع inView:

رویداد enter باعث فراخوانی تابعی می شود که موارد زیر را انجام می دهد:

۱- تصویر موجود در figure را انتخاب می کند.

۲- چک می کند که دارای اتریبیوت data-src باشد.

۳- کلاس is-loading را به wrapper و figure و المان اضافه می کند.

۴- تصویر واقعی را با مراجعه به data-src بازیابی و نمایش می دهد.

۵- وقتی که تصویر کامل لود شد، آنرا به container اضافه می کند.

۶- در نهایت کلاس is-loading را به is-loaded تبدیل می کند.

همانطور که از کد بالا متوجه می شوید، دو کلاس جدید به نام های is-loading و is-loaded را معرفی کردیم. از کلاس is-loading برای نمایش انیمیشن loading بهنگام لود تصاویر استفاده می شود و از کلاس is-loaded برای زمانی که تصویر کاملا لود شده است و می خواهیم بجای انیمیشن لودینگ، تصویر واقعی را به کاربر نمایش دهیم:

 

figure.is-loaded img {
   animation: fadeIn 0.38s linear 1s forwards;
}
figure.is-loading {
   position: relative;
}
figure.is-loading:after {
   content: '';
   display: block;
   color: #ddd;
   font-size: 30px;
   text-indent: -9999em;
   overflow: hidden;
   width: 1em;
   height: 1em;
   border-radius: 50%;
   margin: auto;
   position: absolute;
   top: 50%;
   left: 50%;
   margin-left: -0.5em;
   margin-top: -0.5em;
   transform: translateZ(0);
   animation: loading 1.7s infinite ease;
}
@keyframes loading {
   0% {
     transform: rotate(0deg);
     box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
   }

   5%,
   95% {
     box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
   }
   10%,
   59% {
     box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
   }
   20% {
     box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
   }
   38% {
     box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
   }
   100% {
     transform: rotate(360deg);
     box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
   }
}
@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}
 

تعریف المان noscript در اطراف تصاویر:

در این مرحله می خواهیم اطمینان حاصل کنیم که اگر اسکریپت تصاویر را غیرفعال کنیم، باز هم تصاویر بدرستی لود می شوند. به این منظور المان noscript را در اطراف تصاویر تعریف می کنیم:

 

<figure>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="./images/image-24.jpg" alt="" width="800" height="554">
    <noscript>
        <img src="./images/image-24.jpg" alt="" width="800" height="554">
    </noscript>
</figure>

 

اکنون اگر صفحه وب سایت خود را رفرش کنید و inspect گوگل کروم را باز کنید، مشاهده خواهیم کرد که سرعت لود وب سایت به شکل قابل ملاحظه ای بهبود یافته است. زیرا در هر لحظه، تصاویری که برای کاربر قابل مشاهده می باشد را لود می کنیم:

سرعت لود وب سایت به شکل قابل ملاحظه ای بهبود یافته است

 

سرعت لود صفحه در حالت اول ۱۱ ثانیه بود و پس از استفاده از in-view.js و تعریف استایل های لازم، سرعت لود صفحه را به ۱٫۹ ثانیه رساندیم. یعنی حدود ۵۰۰% بهبود سرعت!

 

مزایای پلاگین inView.js نسبت به Lazy-loading:

مفاهیمی که در این مقاله بیان کردیم بعنوان تکنیک lazy-loading در دنیای طراحی وب مطرح می شود.

پلاگین ها و کتابخانه های زیادی وجود دارند که کار in-view.js را انجام می دهند. دلیلی که باعث مزیت in-view نسبت به سایر رقبا می شود اینست که بطور کلی مختصر و مفید می باشد. امکانات و ویژگی های اضافی ندارد و قابلیت کنترل و انعطاف پذیری بیشتری نسبت به کتابخانه های مشابه دارد. علاوه بر مزیت های فوق، کتابخانه in-view.js را می توانیم در موارد دیگری بجز lazy-loading استفاده کنیم. مانند ایجاد timeline و اسکرول بینهایت (infinite scroll) و…

 

منبع: https://webdesign.tutsplus.com


برچسب‌ها:

lazy loadingبهبود کارایی وب سایتپلاگین in-view.jsتکنیک lazy-loadingرویداد enterسرعت لود تصاویرسرعت لود وب سایتلود تصاویرلیزی لودینگ


دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

2 × دو =