verlok/lazyload
Lazyload
هذا المشروع عبارة عن مكتبة JavaScript بسيطة ومحسن لأداء الويب مصمم لتأجيل تحميل الصور، ومقاطع الفيديو، وiframes حتى تدخل في إطار عرض المتصفح (viewport). يعمل كغلاف لمراقب التقاطع (intersection observer) ومحمل وسائط متكيف لتقليل أوقات تحميل الصفحة الأولية وتوفير النطاق الترددي.
تتميز المكتبة بدعم الصور المتجاوبة عبر srcset ووسوم picture، بالإضافة إلى صور خلفية CSS وSVG المتحركة. تتكامل مع سمات التحميل الأصلية للمتصفح حيثما توفرت مع توفير بدائل مخصصة للبيئات غير المدعومة. يمكنها أيضاً تشغيل تنفيذ دوال JavaScript معينة بناءً على رؤية العنصر.
تغطي القدرات الواسعة إدارة أصول الواجهة الأمامية مع دعم استهداف حاوية التمرير المخصصة ومراقبة المحتوى الديناميكي للعناصر المحقونة بشكل غير متزامن. تدير الأداة أيضاً موثوقية الشبكة من خلال معالجة أخطاء تحميل الأصول وإلغاء التنزيلات النشطة للعناصر التي تخرج من إطار العرض قبل الاكتمال.
Features
- Initial Page Load Optimizations - Reduces initial page load times by deferring the loading of images, videos, and iframes until they enter the viewport.
- Frontend Asset Deferral Management - Manages how and when media assets and third-party embeds load to save bandwidth and improve responsiveness.
- Intersection Observer Implementations - Uses the browser's native IntersectionObserver API to trigger asset loading when elements enter the viewport.
- IntersectionObserver Media Loaders - Handles responsive images, animated SVGs, and iframes using a mix of native loading and custom fallbacks.
- Lazy Loading Libraries - Provides a vanilla JavaScript library to defer the loading of images, videos, and iframes until they enter the viewport.
- Responsive Image Loaders - Loads the most appropriate image source using picture tags and srcset attributes only when the element enters the viewport.
- Media Lazy Loading - Handles the lazy loading of complex image sets and picture tags across different device screen sizes.
- Video Lazy Loading - Defers the loading of video elements until they enter the viewport to optimize initial page speed.
- Viewport-Based Asset Loading - Delays loading of images, videos, iframes, and scripts until they enter the viewport to increase initial page speed.
- Web Performance Optimization Tools - Increases initial page speed by reducing the number of assets loaded during the first request.
- Viewport Action Triggers - Triggers specific JavaScript functions or loading processes automatically when elements become visible.
- CSS Background Image Deferral - Delays the loading of CSS background images until they are visible to the user.
- Custom Scroll Triggers - Detects visibility triggers within specific scrolling containers instead of only the global browser window.
- Visibility Tracking - Supports independent scrolling panels by binding visibility detection to specific overflow elements instead of the global window.
- Visibility-Triggered Actions - Automatically executes custom JavaScript functions when specific elements scroll into the user's view.
- Data Attribute Asset Deferral - Prevents initial page downloads by storing source URLs in custom data attributes until they are needed.
- Dynamic Asset Observation - Updates visibility observers to automatically handle the lazy loading of assets within dynamically injected content.
- Dynamic Element Observation - Automatically detects and tracks new elements added to the DOM asynchronously to trigger lazy loading.
- Loading Error Recovery - Handles loading failures for lazy-loaded assets by preventing broken images and retrying loads when connectivity returns.
- Native Lazy Loading Polyfills - Prioritizes native browser loading attributes while providing a JavaScript polyfill for unsupported environments.
- Iframe Lazy Loading - Delays the loading of embedded iframes until they enter the browser viewport to reduce initial load time.
- Image Optimization - Lazy load images and iframes to improve initial page load.
