vanilla lazyload تنزيل - vanilla lazyload تنزيل كود المصدر

LazyLoad عبارة عن برنامج نصي مرن وخفيف الوزن (2.4 كيلو بايت) يعمل على تسريع تطبيق الويب الخاص بك عن طريق تأجيل تحميل الصور الموجودة في الجزء السفلي من الصفحة وملفات SVG المتحركة ومقاطع الفيديو وإطارات iframe حتى وقت دخولها إلى منفذ العرض . إنه مكتوب بلغة جافا سكريبت "الفانيليا" البسيطة، ويستفيد من IntersectionObserver API، ويدعم الصور سريعة الاستجابة، ويحسن موقع الويب الخاص بك للاتصالات الأبطأ، ويمكنه تمكين التحميل البطيء الأصلي. شاهد جميع الميزات للمزيد.

➡️ انتقل إلى: ?‍ البدء - HTML - ?‍ البدء - البرنامج النصي - ? وصفات - عروض تجريبية - ? نصائح وحيل - ؟ واجهة برمجة التطبيقات -؟ جميع الميزات مقارنة

أحب هذا المشروع؟ ؟ اشتري لي القهوة!

‍ البدء - HTML

لكي يتم تحميل المحتوى الخاص بك بواسطة LazyLoad، يجب عليك استخدام بعض سمات data- بدلاً من السمات الفعلية. الأمثلة أدناه.

صورة كسولة:

 < img alt =" A lazy image " class =" lazy " data-src =" lazy.jpg " />

صورة كسولة ذات عنصر نائب منخفض الجودة:

 < img alt =" A lazy image " class =" lazy " src =" lazy-lowQuality.jpg " data-src =" lazy.jpg " />

صورة سريعة الاستجابة مع `srcset` `sizes` :

 < img
  alt =" A lazy image "
  class =" lazy "
  data-src =" lazy.jpg "
  data-srcset =" lazy_400.jpg 400w, 
    lazy_800.jpg 800w "
  data-sizes =" 100w "
/>

للحصول على عنصر نائب منخفض الجودة، قم بإضافة السمة src التي تشير إلى نسخة صغيرة جدًا من الصورة. على سبيل المثال src="lazy_10.jpg" .

صورة سريعة الاستجابة مع دعم hi-dpi باستخدام علامة `picture` :

 < picture >
  < source media =" (min-width: 1200px) " data-srcset =" lazy_1200.jpg 1x, lazy_2400.jpg 2x " />
  < source media =" (min-width: 800px) " data-srcset =" lazy_800.jpg 1x, lazy_1600.jpg 2x " />
  < img alt =" A lazy image " class =" lazy " data-src =" lazy.jpg " />
</ picture >

للحصول على عنصر نائب منخفض الجودة، قم بإضافة السمة src التي تشير إلى نسخة صغيرة جدًا من الصورة إلى علامة img . على سبيل المثال src="lazy_10.jpg" .

صورة سريعة الاستجابة مع التحديد التلقائي لتنسيق WebP ، باستخدام علامة `picture` :

 < picture >
  < source
    type =" image/webp "
    data-srcset =" lazy_400.webp 400w, 
      lazy_800.webp 800w "
    data-sizes =" 100w "
  />
  < img
    alt =" A lazy image "
    class =" lazy "
    data-src =" lazy.jpg "
    data-srcset =" lazy_400.jpg 400w, 
      lazy_800.jpg 800w "
    data-sizes =" 100w "
  />
</ picture >

للحصول على عنصر نائب منخفض الجودة، قم بإضافة السمة src التي تشير إلى نسخة صغيرة جدًا من الصورة إلى العلامة img . على سبيل المثال src="lazy_10.jpg" .

صورة الخلفية كسول

ملاحظة هامة : لعرض صور المحتوى على صفحاتك، استخدم دائمًا علامة img . وهذا من شأنه أن يفيد تحسين محركات البحث وإمكانية الوصول إلى موقع الويب الخاص بك. لفهم ما إذا كانت صورك عبارة عن محتوى أم خلفية، اسأل نفسك: "هل يرغب مستخدم موقع الويب الخاص بي في رؤية تلك الصور عند طباعة الصفحة؟". إذا كانت الإجابة "نعم"، فإن صورك هي صور محتوى ويجب عليك تجنب استخدام صور الخلفية لعرضها.

صورة خلفية واحدة:

 < div class =" lazy " data-bg =" lazy.jpg " > </ div >

خلفية واحدة، مع دعم شاشة HiDPI:

 < div class =" lazy " data-bg =" lazy.jpg " data-bg-hidpi =" [email protected] " > </ div >

خلفيات متعددة:

 < div
  class =" lazy "
  data-bg-multi =" url(lazy-head.jpg), 
    url(lazy-body.jpg), 
    linear-gradient(#fff, #ccc) "
>
  ...
</ div >

خلفيات متعددة، دعم شاشة HiDPI:

 < div
  class =" lazy "
  data-bg-multi =" url(lazy-head.jpg),
    url(lazy-body.jpg),
    linear-gradient(#fff, #ccc) "
  data-bg-multi-hidpi =" url([email protected]),
    url([email protected]),
    linear-gradient(#fff, #ccc) "
>
  ...
</ div >

الخلفيات مع `image-set` :

 < div class =" lazy " data-bg-set =" url('[email protected]') 1x, url('[email protected]') 2x " > ... </ div >

خلفيات متعددة مع `image-set` :

 < div
  class =" lazy "
  data-bg-set ="
    url('[email protected]') 1x, url('[email protected]') 2x | 
    url('[email protected]') 1x, url('[email protected]') 2x
  "
>
  ...
</ div >

رسوم متحركة كسول SVG

 < object class =" lazy " type =" image/svg+xml " data-src =" lazy.svg " > </ object >

فيديو كسول

 < video class =" lazy " controls width =" 620 " data-src =" lazy.mp4 " data-poster =" lazy.jpg " >
  < source type =" video/mp4 " data-src =" lazy.mp4 " />
  < source type =" video/ogg " data-src =" lazy.ogg " />
  < source type =" video/avi " data-src =" lazy.avi " />
</ video >

يرجى ملاحظة أنه يمكن تحميل ملصق الفيديو بتكاسل أيضًا.

إطار iframe كسول

 < iframe class =" lazy " data-src =" lazyFrame.html " > </ iframe >

أحب هذا المشروع؟ ؟ اشتري لي القهوة!

‍ البدء - البرنامج النصي

أحدث إصدار موصى به من LazyLoad هو 19.1.3 . لاحظ أنه إذا كنت بحاجة إلى دعم Internet Explorer 11، فستحتاج إلى استخدام الإصدار 17.9.0 أو أقل.

افهم بسرعة كيفية الترقية من إصدار سابق من خلال قراءة دليل الترقية العملي.

الطريقة البسيطة والأسهل

أسهل طريقة لاستخدام LazyLoad هي تضمين البرنامج النصي من CDN.

 < script src =" https://cdn.jsdelivr.net/npm/[email protected]/dist/lazyload.min.js " > </ script >

أو، إذا كنت تفضل استيرادها كوحدة ES:

 < script type =" module " >
  import LazyLoad from "https://cdn.jsdelivr.net/npm/[email protected]/+esm" ;
</ script >

ثم في كود جافا سكريبت الخاص بك:

 var lazyLoadInstance = new LazyLoad ( {
  // Your custom settings go here
} ) ;

للتأكد من أن DOM للمحتوى البطيء الخاص بك جاهز عند إنشاء LazyLoad، ضع علامة البرنامج النصي مباشرة قبل علامة الإغلاق </body> .

إذا وصل المزيد من DOM لاحقًا، على سبيل المثال عبر استدعاء AJAX، فستحتاج إلى الاتصال بـ lazyLoadInstance.update(); لجعل LazyLoad يتحقق من DOM مرة أخرى.

 lazyLoadInstance . update ( ) ;

باستخدام برنامج نصي `async`

إذا كنت تفضل ذلك، فمن الممكن تضمين البرنامج النصي لـ LazyLoad باستخدام البرنامج النصي async وتهيئته بمجرد تحميله.

للقيام بذلك، يجب عليك تحديد الخيارات قبل تضمين البرنامج النصي . يمكنك تمرير:

{} كائن للحصول على مثيل واحد من LazyLoad
[{}, {}] مصفوفة من الكائنات للحصول على مثيلات متعددة من LazyLoad، ولكل منها خيارات مختلفة.

 < script >
  // Set the options globally
  // to make LazyLoad self-initialize
  window . lazyLoadOptions = {
    // Your custom settings go here
  } ;
</ script >

ثم قم بتضمين البرنامج النصي.

 < script
  async
  src =" https://cdn.jsdelivr.net/npm/[email protected]/dist/lazyload.min.js "
> </ script >

من الممكن وضع علامة البرنامج النصي مباشرة قبل علامة الإغلاق </body> . إذا لم تتمكن من القيام بذلك، فمن الممكن تنفيذ LazyLoad قبل أن يقوم المتصفح بتحميل كل عناصر DOM، وستحتاج إلى استدعاء طريقة update() الخاصة به لجعله يتحقق من DOM مرة أخرى.

استخدام برنامج نصي `async` + الحصول على مرجع المثيل

كما هو مذكور أعلاه، ولكن يجب عليك وضع كود addEventListener الموضح أدناه قبل تضمين البرنامج النصي async .

 < script >
  // Set the options globally
  // to make LazyLoad self-initialize
  window . lazyLoadOptions = {
    // Your custom settings go here
  } ;
  // Listen to the initialization event
  // and get the instance of LazyLoad
  window . addEventListener (
    "LazyLoad::Initialized" ,
    function ( event ) {
      window . lazyLoadInstance = event . detail . instance ;
    } ,
    false
  ) ;
</ script >

ثم قم بتضمين البرنامج النصي.

 < script
  async
  src =" https://cdn.jsdelivr.net/npm/[email protected]/dist/lazyload.min.js "
> </ script >

الآن ستتمكن من استدعاء أساليبه، مثل:

 lazyLoadInstance . update ( ) ;

العرض التوضيحي - المصدر ← لمثيل LazyLoad واحد

العرض التوضيحي - المصدر ← لمثيلات LazyLoad المتعددة

التثبيت المحلي

إذا كنت تفضل تثبيت LazyLoad محليًا في مشروعك، فيمكنك ذلك!

باستخدام npm

 npm install vanilla-lazyload

باستخدام كوخ

 bower install vanilla-lazyload

التنزيل اليدوي

قم بتنزيل أحد أحدث الإصدارات. الملفات التي تحتاجها موجودة داخل مجلد dist . إذا كنت لا تعرف أي واحدة تختار، فاستخدم lazyload.min.js أو اقرأ عن الحزم.

الاستخدام المحلي

في حالة تثبيت LazyLoad محليًا، يمكنك استيراده كوحدة ES كما يلي:

 import LazyLoad from "vanilla-lazyload" ;

من الممكن أيضًا (ولكن من غير المستحسن) استخدام بناء جملة require commonJS.

مزيد من المعلومات حول تجميع LazyLoad مع WebPack متاحة في هذا الريبو المحدد.

الاستخدام مع رد الفعل

ألقِ نظرة على هذا المثال لاستخدام React with LazyLoad على Sandbox.

يأخذ هذا التنفيذ نفس الدعائم التي تمررها عادةً إلى علامة img ، ولكنه يعرض صورة كسولة. لا تتردد في شوكة وتحسينه!

حزم

ستجد داخل مجلد dist حزمًا مختلفة.

اسم الملف	نوع الوحدة	المزايا
`lazyload.min.js`	UMD (تعريف الوحدة العالمية)	يعمل إلى حد كبير في كل مكان، حتى في سياقات JS المشتركة
`lazyload.iife.min.js`	IIFE (تعبير الوظيفة الذي يتم استدعاؤه فورًا)	يعمل كـ `<script src="...">` في الصفحة، وهو أصغر بحوالي 0.5 كيلو بايت من إصدار UMD
`esm/lazyload.js`	وحدة ES	يُصدر `LazyLoad` حتى تتمكن من استيراده في مشروعك باستخدام `<script type="module" src="...">` ومجمع مثل WebPack أو Rollup

أحب هذا المشروع؟ ؟ اشتري لي القهوة!

؟ وصفات

هذا هو القسم الذي يمكنك أن تجد فيه كودًا جاهزًا لنسخ ولصق الكود لراحتك.

إخفاء النص البديل والصورة الفارغة

حالة الاستخدام : عندما تعرض صورك المحملة بتكاسل نصها alt وأيقونة الصورة الفارغة قبل التحميل.

CSS

 img : not ([ src ]) : not ([ srcset ]) {
  visibility : hidden;
}

فقط هذا حقا.

معالجة أخطاء الصور

حالة الاستخدام : عندما تريد منع عرض الصور غير الموجودة/المعطلة على موقع الويب الخاص بك.

جافا سكريبت

 var myLazyLoad = new LazyLoad ( {
  // Other options here...
  callback_error : ( img ) => {
    // Use the following line only if your images have the `srcset` attribute
    img . setAttribute ( "srcset" , "[email protected] 1x, [email protected] 2x" ) ;
    img . setAttribute ( "src" , "[email protected]" ) ;
  }
} ) ;

ملاحظة: إذا تم إنشاء الخطأ بواسطة شبكة معطلة (المتصفح إذا كان غير متصل بالإنترنت مؤقتًا)، فسيحاول Vanilla-lazyload تحميل الصور مرة أخرى عندما تصبح الشبكة متاحة مرة أخرى.

مثال - API

المحتوى الديناميكي

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

جافا سكريبت

 var myLazyLoad = new LazyLoad ( ) ;
// After your content has changed...
myLazyLoad . update ( ) ;

العرض التوضيحي - المصدر - واجهة برمجة التطبيقات

التحميل البطيء المختلط الأصلي والمستند إلى JS

حالة الاستخدام : تريد استخدام خيار use_native لتفويض تحميل الصور وإطارات iframe ومقاطع الفيديو إلى محرك المتصفحات حيث يكون مدعومًا، ولكنك تريد أيضًا تحميل صور الخلفية بتكاسل.

HTML

 < img class =" lazy " alt =" A lazy image " data-src =" lazy.jpg " />
< iframe class =" lazy " data-src =" lazyFrame.html " > </ iframe >
< video class =" lazy " controls data-src =" lazy.mp4 " data-poster =" lazy.jpg " > ... </ video >
< object class =" lazy " type =" image/svg+xml " data-src =" lazy.svg " > </ object >
< div class =" lazy " data-bg =" lazy.jpg " > </ div >

جافا سكريبت

 // Instance using native lazy loading
const lazyContent = new LazyLoad ( {
  use_native : true // <-- there you go
} ) ;

// Instance without native lazy loading
const lazyBackground = new LazyLoad ( {
  // DON'T PASS use_native: true HERE
} ) ;

العرض التوضيحي - المصدر - واجهة برمجة التطبيقات

لوحة (لوحات) التمرير

حالة الاستخدام : عندما لا تكون حاوية التمرير الخاصة بك هي نافذة المتصفح الرئيسية، ولكنها حاوية تمرير.

HTML

 < div class =" scrollingPanel " >
  <!-- Set of images -->
</ div >

جافا سكريبت

 var myLazyLoad = new LazyLoad ( {
  container : document . querySelector ( ".scrollingPanel" )
} ) ;

العرض التوضيحي - المصدر - واجهة برمجة التطبيقات

إذا كان لديك لوحات تمرير متعددة ، فيمكنك استخدام العلامات والتعليمات البرمجية التالية.

HTML

 < div id =" scrollingPanel1 " class =" scrollingPanel " >
  <!-- Set of images -->
</ div >
< div id =" scrollingPanel2 " class =" scrollingPanel " >
  <!-- Set of images -->
</ div >

جافا سكريبت

 var myLazyLoad1 = new LazyLoad ( {
  container : document . getElementById ( "scrollingPanel1" )
} ) ;
var myLazyLoad2 = new LazyLoad ( {
  container : document . getElementById ( "scrollingPanel2" )
} ) ;

العرض التوضيحي - المصدر - واجهة برمجة التطبيقات

وظائف كسول

حالة الاستخدام : عندما تريد تنفيذ نصوص برمجية أو وظائف عشوائية عندما تدخل عناصر معينة إلى إطار العرض

HTML

 < div class =" lazy " data-lazy-function =" foo " > ... </ div >
< div class =" lazy " data-lazy-function =" bar " > ... </ div >
< div class =" lazy " data-lazy-function =" buzz " > ... </ div >
< div class =" lazy " data-lazy-function =" booya " > ... </ div >

شبيبة

 // It's a best practice to scope the function names inside a namespace like `lazyFunctions`.
window . lazyFunctions = {
  foo : function ( element ) {
    element . style . color = "red" ;
    console . log ( "foo" ) ;
  } ,
  bar : function ( element ) {
    element . remove ( element ) ;
    console . log ( "bar" ) ;
  } ,
  buzz : function ( element ) {
    var span = document . createElement ( "span" ) ;
    span . innerText = " - buzz!" ;
    element . appendChild ( span ) ;
    console . log ( "buzz" ) ;
  } ,
  booya : function ( element ) {
    element . classList . add ( "boo" ) ;
    console . log ( "booya" ) ;
  }
} ;

 function executeLazyFunction ( element ) {
  var lazyFunctionName = element . getAttribute ( "data-lazy-function" ) ;
  var lazyFunction = window . lazyFunctions [ lazyFunctionName ] ;
  if ( ! lazyFunction ) return ;
  lazyFunction ( element ) ;
}

var ll = new LazyLoad ( {
  unobserve_entered : true , // <- Avoid executing the function multiple times
  callback_enter : executeLazyFunction // Assigning the function defined above
} ) ;

استخدم unobserve_entered لتجنب تنفيذ الوظيفة عدة مرات.

هذا كل شيء. عندما يدخل عنصر ذو سمة وظيفة data-lazy-function إلى منفذ العرض، يستدعي LazyLoad وظيفة executeLazyScript ، التي تحصل على اسم الوظيفة من سمة وظيفة data-lazy-function نفسها وتنفذها.

العرض التوضيحي - المصدر - واجهة برمجة التطبيقات

التهيئة البطيئة لمثيلات LazyLoad المتعددة

حالة الاستخدام : عندما يكون لديك الكثير من الحاويات التي يتم تمريرها أفقيًا وتريد إنشاء مثيل LazyLoad عليها، ولكن فقط عند دخولها إلى إطار العرض.

HTML

 < div class =" horizContainer " >
  < img
    src =""
    alt =" Row 01, col 01 "
    data-src =" https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_01_col_01&amp;w=200&amp;h=200 "
  />
  < img
    src =""
    alt =" Row 01, col 02 "
    data-src =" https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_01_col_02&amp;w=200&amp;h=200 "
  />
  <!-- ... -->
</ div >
< div class =" horizContainer " >
  < img
    src =""
    alt =" Row 02, col 01 "
    data-src =" https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_02_col_01&amp;w=200&amp;h=200 "
  />
  < img
    src =""
    alt =" Row 02, col 02 "
    data-src =" https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_02_col_02&amp;w=200&amp;h=200 "
  />
  <!-- ... -->
</ div >

جافا سكريبت

 var lazyLoadInstances = [ ] ;

var initOneLazyLoad = function ( horizContainerElement ) {
  // When the .horizContainer element enters the viewport,
  // instantiate a new LazyLoad on the horizContainerElement
  var oneLL = new LazyLoad ( {
    container : horizContainerElement
  } ) ;
  // Optionally push it in the lazyLoadInstances
  // array to keep track of the instances
  lazyLoadInstances . push ( oneLL ) ;
} ;

// The "lazyLazy" instance of lazyload is used to check
// when the .horizContainer divs enter the viewport
var lazyLazy = new LazyLoad ( {
  elements_selector : ".horizContainer" ,
  callback_enter : initOneLazyLoad ,
  unobserve_entered : true // Stop observing .horizContainer(s) after they entered
} ) ;

هذا كل شيء. عندما يدخل عنصر .horizContainer إلى منفذ العرض، يستدعي LazyLoad وظيفة initOneLazyLoad ، التي تقوم بإنشاء مثيل جديد لـ LazyLoad على عنصر .horizContainer .

العرض التوضيحي - المصدر - واجهة برمجة التطبيقات

أحب هذا المشروع؟ ؟ اشتري لي القهوة!

العروض التوضيحية

لم تجد الوصفة التي تناسب حالتك تمامًا؟ لدينا العروض!

يحتوي مجلد العروض التوضيحية على أكثر من 30 حالة استخدام لـ Vanilla-lazyload. ربما تجد هناك ما تبحث عنه.

يكتب	عنوان	شفرة	تجريبي
محتوى	صور بسيطة محملة كسولة، ولا تستخدم أي عنصر نائب	شفرة	يعيش
محتوى	الصور الكسولة التي تستخدم ملف SVG مضمّنًا كعنصر نائب	شفرة	يعيش
محتوى	الصور البطيئة التي تستخدم ملف SVG خارجي كعنصر نائب	شفرة	يعيش
محتوى	صور سريعة الاستجابة مع `srcset`	شفرة	يعيش
محتوى	صور سريعة الاستجابة مع علامة `<picture>` وسمة `media` (الاتجاه الفني)	شفرة	يعيش
محتوى	صور سريعة الاستجابة مع `srcset` `sizes` (باستخدام `data-sizes` )	شفرة	يعيش
محتوى	صور سريعة الاستجابة مع `srcset` `sizes` (باستخدام `sizes` العادية)	شفرة	يعيش
محتوى	فيديو بطيء يحتوي على علامات `<source>` متعددة، وخيارات تحميل مسبق مختلفة، ولا يوجد تشغيل تلقائي	شفرة	يعيش
محتوى	فيديو بطيء يحتوي على علامات `<source>` متعددة، وخيارات تحميل مسبق مختلفة، مع التشغيل التلقائي	شفرة	يعيش
محتوى	كسول تحميل صور الخلفية	شفرة	يعيش
محتوى	كسول تحميل صور خلفية متعددة	شفرة	يعيش
محتوى	تحميل صور الخلفية كسولًا باستخدام `image-set()`	شفرة	يعيش
محتوى	تحميل إطارات iframe كسول	شفرة	يعيش
محتوى	التحميل البطيء لملفات SVG وملفات PDF المتحركة	شفرة	يعيش
محتوى	صور Lazy WebP مع العلامة `<picture>` وسمة `type` لـ WebP	شفرة	يعيش
تحميل	تحميل LazyLoad غير متزامن باستخدام `<script async>`	شفرة	يعيش
تحميل	تحميل غير متزامن لمثيلات LazyLoad المتعددة باستخدام `<script async>`	شفرة	يعيش
خطأ	اختبر سلوك تحميل الخطأ عندما تكون `restore_on_error` `false`	شفرة	يعيش
خطأ	اختبر سلوك تحميل الخطأ عندما يكون `restore_on_error` `true`	شفرة	يعيش
تقنية	تتلاشى في الصور أثناء تحميلها	شفرة	يعيش
تقنية	تحميل الصور البطيئة في أشرطة التمرير الأفقية الخاصة بـ CSS فقط (نمط Netflix)	شفرة	يعيش
تقنية	قم بإنشاء مثيلات Swiper بتكاسل وقم بتحميل صور Swiper بتكاسل	شفرة	يعيش
تقنية	تنفيذ الوظائف بتكاسل عندما تدخل عناصر محددة إلى إطار العرض	شفرة	يعيش
تقنية	كيفية إدارة طباعة الصفحة التي تحتوي على صور كسولة	شفرة	يعيش
تقنية	طبقة منبثقة تحتوي على صور كسولة في حاوية التمرير	شفرة	يعيش
إعدادات	حاويات التمرير المتعددة	شفرة	يعيش
إعدادات	حاوية تمرير واحدة	شفرة	يعيش
طُرق	كيفية `restore()` DOM إلى حالته الأصلية و/أو `destroy()` LazyLoad	شفرة	يعيش
طُرق	إضافة محتوى ديناميكي، ثم `update()` LazyLoad	شفرة	يعيش
طُرق	إضافة محتوى ديناميكي، ثم `update()` LazyLoad بتمرير مجموعة NodeSet من العناصر	شفرة	يعيش
طُرق	قم بتحميل الصور في الموعد المحدد باستخدام طريقة `load()`	شفرة	يعيش
طُرق	تحميل جميع الصور مرة واحدة باستخدام `loadAll()`	شفرة	يعيش
امتحان	اختبار لعتبات متعددة	شفرة	يعيش
امتحان	اختبار السلوك مع الصور المخفية	شفرة	يعيش
امتحان	أداء الاختبار، التحميل البطيء لمئات الصور	شفرة	يعيش
محلي	اختبر التحميل البطيء الأصلي للصور دون أي سطر من جافا سكريبت، ولا حتى هذا البرنامج النصي	شفرة	يعيش
محلي	اختبر التحميل البطيء الأصلي للصور بشكل مشروط باستخدام خيار `use_native` (راجع واجهة برمجة التطبيقات)	شفرة	يعيش

أحب هذا المشروع؟ ؟ اشتري لي القهوة!

؟ نصائح وحيل

يوسع

vanilla lazyload

‍ البدء - HTML

صورة كسولة:

صورة كسولة ذات عنصر نائب منخفض الجودة:

صورة سريعة الاستجابة مع srcset sizes :

صورة سريعة الاستجابة مع دعم hi-dpi باستخدام علامة picture :

صورة سريعة الاستجابة مع التحديد التلقائي لتنسيق WebP ، باستخدام علامة picture :

صورة الخلفية كسول

صورة خلفية واحدة:

خلفية واحدة، مع دعم شاشة HiDPI:

خلفيات متعددة:

خلفيات متعددة، دعم شاشة HiDPI:

الخلفيات مع image-set :

خلفيات متعددة مع image-set :

رسوم متحركة كسول SVG

فيديو كسول

إطار iframe كسول

‍ البدء - البرنامج النصي

الطريقة البسيطة والأسهل

باستخدام برنامج نصي async

استخدام برنامج نصي async + الحصول على مرجع المثيل

التثبيت المحلي

باستخدام npm

باستخدام كوخ

التنزيل اليدوي

الاستخدام المحلي

الاستخدام مع رد الفعل

حزم

؟ وصفات

إخفاء النص البديل والصورة الفارغة

معالجة أخطاء الصور

المحتوى الديناميكي

التحميل البطيء المختلط الأصلي والمستند إلى JS

لوحة (لوحات) التمرير

وظائف كسول

التهيئة البطيئة لمثيلات LazyLoad المتعددة

العروض التوضيحية

؟ نصائح وحيل

صورة سريعة الاستجابة مع `srcset` `sizes` :

صورة سريعة الاستجابة مع دعم hi-dpi باستخدام علامة `picture` :

صورة سريعة الاستجابة مع التحديد التلقائي لتنسيق WebP ، باستخدام علامة `picture` :

الخلفيات مع `image-set` :

خلفيات متعددة مع `image-set` :

باستخدام برنامج نصي `async`

استخدام برنامج نصي `async` + الحصول على مرجع المثيل