الصفحة الرئيسية>المتعلقة بالبرمجة>شفرة المصدر الأخرى
تنزيل

Lozad.JS

محمل كسول للغاية وضوء وقابل للتكوين في JS النقي مع عدم وجود تبعيات للصور والإطارات وأكثر من ذلك ، باستخدام intersectionObserver API

JLM Coutureتوازن جديدبي بي سي

وغيرها الكثير ...

جدول المحتويات

  • العرض التوضيحي
  • خلفية
  • ثَبَّتَ
  • الاستخدام
  • مثال مع علامة الصورة
  • دعم المتصفح
  • الأسئلة الشائعة
  • يساهم
  • Changelog
  • رخصة

هناك مكتبة جافا سكريبت كسولة أخرى ، لماذا؟

توصيل مكتبات التحميل البطيئة الحالية بحدث التمرير أو استخدم مؤقتًا دوريًا واستدعاء getBoundingClientRect() على العناصر التي تحتاج إلى تحميل كسول. ومع ذلك ، فإن هذا النهج بطيء بشكل مؤلم حيث أن كل دعوة إلى getBoundingClientRect() يفرض المتصفح على إعادة وضع الصفحة بأكملها وستقدم غابة كبيرة على موقع الويب الخاص بك.

إن جعل هذا الأمر أكثر كفاءة وأداء هو ما تم تصميمه لـ InterSectionObserver ، وقد هبط في Chrome 51.

ثَبَّتَ 

 # You can install lozad with npm
$ npm install --save lozad

# Alternatively you can use Yarn
$ yarn add lozad

# Another option is to use Bower
$ bower install lozad

ثم مع مجموعة من الوحدة النمطية مثل Rollup أو WebPack ، استخدم كما تفعل أي شيء آخر: 

 // using ES6 modules
import lozad from 'lozad'

// using CommonJS modules
var lozad = require ( 'lozad' )

أو التحميل عبر CDN وتضمين في علامة head صفحتك. 

 < script type =" text/javascript " src =" https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js " > </ script >

عند التحميل من CDN ، يمكنك العثور على المكتبة على window.lozad .

الاستخدام

في HTML ، أضف معرفًا إلى العنصر (المحدد الافتراضي الذي تم تحديده هو فئة lozad ): 

 < img class =" lozad " data-src =" image.png " >

كل ما عليك فعله الآن هو مجرد إنشاء لوزاد على النحو التالي: 

 const observer = lozad ( ) ; // lazy loads elements with default selector as '.lozad'
observer . observe ( ) ;

أو مع مرجع Element DOM: 

 const el = document . querySelector ( 'img' ) ;
const observer = lozad ( el ) ; // passing a `NodeList` (e.g. `document.querySelectorAll()`) is also valid
observer . observe ( ) ;

أو بخيارات مخصصة: 

 const observer = lozad ( '.lozad' , {
    rootMargin : '10px 0px' , // syntax similar to that of CSS Margin
    threshold : 0.1 , // ratio of element convergence
    enableAutoReload : true // it will reload the new image when validating attributes changes
} ) ;
observer . observe ( ) ;

مرجع:

  • intersectionObserver خيارات: rootmargin
  • intersectionObserver خيارات: عتبات

أو إذا كنت ترغب في إعطاء تعريف وظيفة مخصصة لتحميل العنصر: 

 lozad ( '.lozad' , {
    load : function ( el ) {
        console . log ( 'loading element' ) ;

        // Custom implementation to load an element
        // e.g. el.src = el.getAttribute('data-src');
    }
} ) ;

إذا كنت ترغب في تمديد حالة العناصر loaded ، فيمكنك إضافة خيار التحميل:

ملاحظة : يتم استخدام السمة "data-loaded"="true" بواسطة Lozad لتحديد ما إذا كان قد تم تحميل عنصر مسبقًا. 

 lozad ( '.lozad' , {
    loaded : function ( el ) {
        // Custom implementation on a loaded element
        el . classList . add ( 'loaded' ) ;
    }
} ) ;

إذا كنت ترغب في التحميل كسول العناصر المضافة ديناميكيًا: 

 const observer = lozad ( ) ;
observer . observe ( ) ;

// ... code to dynamically add elements
observer . observe ( ) ; // observes newly added elements as well

للاستخدام مع الصور المستجيبة 

 <!-- responsive image example -->
< img class =" lozad " data-src =" image.png " data-srcset =" image.png 1000w, image-2x.png 2000w " >

للاستخدام مع صور الخلفية 

 <!-- background image example -->
< div class =" lozad " data-background-image =" image.png " >
</ div >

للاستخدام مع صور خلفية متعددة 

 <!-- multiple background image example -->
< div class =" lozad " data-background-image =" path/to/first/image,path/to/second/image,path/to/third/image " >
</ div >

للاستخدام مع صور الخلفية المستجيبة (مجموعة الصور) 

 <!-- responsive background image-set example -->
< div class =" lozad " data-background-image-set =" url('photo.jpg') 1x, url('[email protected]') 2x " >
</ div >

لتغيير المحدد الذي يقسم صور الخلفية: 

 <!-- custom delimiter for background images example -->
< div
  class =" lozad "
  data-background-image =" /first/custom,image,path/image.png-/second/custom,image,path/image.png "
  data-background-delimiter =" - "
>
</ div >

إذا كنت ترغب في تحميل الصور قبل ظهورها: 

 const observer = lozad ( ) ;
observer . observe ( ) ;

const coolImage = document . querySelector ( '.image-to-load-first' ) ;
// ... trigger the load of a image before it appears on the viewport
observer . triggerLoad ( coolImage ) ;

تحسين الصور الكبير

في بعض الأحيان يستغرق تحميل الصورة وقتًا طويلاً. لهذه الحالة ، يمكنك إضافة خلفية العنصر الوطني: 

 < img class =" lozad " data-placeholder-background =" red " data-src =" image.png " >

يضع Lozad لونًا خلفيًا لعلم نائب لعنصر IMG وسيشاهد المستخدمون الاحتياطية حتى يتم تحميل الصورة.

مثال مع علامة الصورة

إنشاء بنية عنصر صورة مكسورة .

IE Browser لا تدعم علامة الصورة! تحتاج إلى تعيين سمة data-iesrc (فقط لعلامات الصور الخاصة بك) مع مصدر لمتصفح IE

يمكن إضافة سمة data-alt إلى علامة الصورة لاستخدامها في alt ATTRIBUTE من الصور المحملة كسول 

 <!-- For an element to be caught, add a block type that is different from the inline and some min-height for correct caught into view -->
< picture class =" lozad " style =" display: block; min-height: 1rem " data-iesrc =" images/thumbs/04.jpg " data-alt ="" >
    < source srcset =" images/thumbs/04.jpg " media =" (min-width: 1280px) " >
    < source srcset =" images/thumbs/05.jpg " media =" (min-width: 980px) " >
    < source srcset =" images/thumbs/06.jpg " media =" (min-width: 320px) " >
    <!-- NO img element -->
    <!-- instead of img element, there will be the last source with the minimum dimensions -->
    <!-- for disabled JS you can set <noscript><img src="images/thumbs/04.jpg" alt=""></noscript> -->
</ picture >

عندما يقوم Lozad بتحميل عنصر الصورة هذا ، فإنه سيصلحه.

إذا كنت ترغب في استخدام صاحب نزيهة الصورة (مثل صاحب نماذج صورة منخفضة الجودة) ، فيمكنك تعيين علامة img مؤقتة داخل علامة picture . سيتم إزالته عندما يقوم Lozad بتحميل عنصر الصورة. 

 < picture class =" lozad " style =" display: block; min-height: 1rem " data-iesrc =" images/thumbs/04.jpg " data-alt ="" >
    < source srcset =" images/thumbs/04.jpg " media =" (min-width: 1280px) " >
    < source srcset =" images/thumbs/05.jpg " media =" (min-width: 980px) " >
    < source srcset =" images/thumbs/06.jpg " media =" (min-width: 320px) " >
    <!-- you can define a low quality image placeholder that will be removed when the picture is loaded -->
    < img src =" data:image/jpeg;base64,/some_lqip_in_base_64== " >
</ picture >

مثال مع الفيديو 

 < video class =" lozad " data-poster =" images/backgrounds/video-poster.jpeg " >
    < source data-src =" video/mov_bbb.mp4 " type =" video/mp4 " >
    < source data-src =" video/mov_bbb.ogg " type =" video/ogg " >
</ video >

مثال مع iframe 

 < iframe data-src =" embed.html " class =" lozad " > </ iframe >

هذا كل شيء ، فقط أضف فئة lozad .

مثال تبديل الفصل 

 < div data-toggle-class =" active " class =" lozad " >
    <!-- content -->
</ div >

سيتم تبديل الفصل active على العنصر عندما يدخل في منفذ عرض المتصفح.

دعم المتصفح

متوفر في أحدث المتصفحات. إذا لم يكن دعم المتصفح متاحًا ، فاستفد من polyfill.

لدعم IE11 ، يرجى الاستفادة من هذه الملفيات.

الأسئلة الشائعة

الخروج من الأسئلة الشائعة عن بعض مساحات الجبلات المشتركة لتكون على دراية بها أثناء استخدام lozad.js

يساهم

هل أنت مهتم بالمساهمة في الميزات والإصلاحات؟

اقرأ المزيد عن المساهمة.

Changelog

انظر changelog

رخصة

MIT © Apoorv Saxena

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل