مولد التحميل الكسول للصور

ولد عناصر نائبة خفيفة للصور وكود تنفيذ التحميل الكسول (Lazy-Loading).

اسحب وأفلت الصورة هنا

أو انقر للرفع

إعدادات المولد

Placeholder Style

Blur Amount

Preview

Size: 0kb

Generated Code

HTML Code

CSS

.lazy { opacity: 0; transition: opacity 0.3s; }
    .lazy.loaded { opacity: 1; }

JavaScript

document.addEventListener("DOMContentLoaded", function() {
      const lazyImages = document.querySelectorAll("img.lazy");
      const observer = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            const img = entry.target;
            img.src = img.dataset.src;
            img.onload = () => img.classList.add("loaded");
            observer.unobserve(img);
          }
        });
      });
      lazyImages.forEach(img => observer.observe(img));
    });

لماذا تستخدم هذه الأداة؟

أدوات خبراء لتحسين الأداء الكامل

زد سرعة موقعك بشكل كبير.

مولد LQIP مؤتمت

ينشئ فوراً نسخاً من صورك بدقة منخفضة جداً ومشفرة بـ base64 لتكون عناصر نائبة فورية وبدون زمن انتقال.

منطق Intersection Observer

يولد كود JavaScript بسيطاً وحديثاً يستخدم API المتصفح الأصلي لبدء تحميل الصور فقط عند الحاجة، مما يقلل استهلاك المعالج.

الحفاظ على نسبة العرض إلى الارتفاع

يحسب ويضمن كود صندوق نسبة العرض إلى الارتفاع لمنع "انزياح التخطيط التراكمي" (CLS) وضمان تحميل صفحة مستقر واحترافي.

كثافة تمويه مخصصة

تحكم في جمالية عناصرك النائبة. اختر من تمويه رقيق إلى تمويه فني كثيف ليطابق لغة تصميم موقعك.

تراجعات للمتصفحات الحديثة والقديمة

يتضمن سمات 'loading=lazy' القياسية جنباً إلى جنب مع مراقبين مخصصين بـ JS ووسوم 'noscript' لأقصى قدر من التوافق عبر المتصفحات.

منطق محلي بدون رفع

تتم جميع معالجات الصور وتشفير النصوص في متصفحك مباشرة. لا يتم تخزين بيانات أو تسجيلها على خوادمنا، مما يضمن خصوصية تامة للأصول.

أتقن التحميل: كيفية تنفيذ التحميل الكسول

ولد كوداً محسناً بخطوات.

ارفع الأصل عالي الدقة

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

تهيئة نمط العنصر النائب

أفلت الصورة الأصلية التي تريد تحسينها في الأداة. يجب أن تكون النسخة النهائية الجاهزة للويب.

توليد كتلة الكود

اختر مستوى "التمويه" المفضل لديك. التمويه العالي يخلق عنصراً نائباً أكثر تجريداً ونعومة وهو مناسب للصور الرئيسية الكبيرة.

الدمج في صفحتك

ستولد الأداة فوراً ثلاثة أقسام: HTML لوسم الصورة، و CSS لتأثير التلاشي، و JS لاكتشاف التمرير.

التحقق من مسارات data-src

استبدل وسوم `<img>` العادية بـ HTML المولد لدينا. أضف CSS الموفر لملف التنسيق و JS للتذييل.

قاعدة معرفة التحميل الكسول: الأسئلة الشائعة حول تحسين التحميل التقدمي

ما فائدة استخدام Base64 للعناصر النائبة؟

يسمح Base64 بتحميل العنصر النائب الصغير داخل كود HTML نفسه، مما يعني صفر طلبات شبكة إضافية ووقت ظهور "فوري".

هل سيضر التحميل الكسول بالسيو الخاص بي؟

لا، في الحقيقة هو يساعد! أصبح زاحف Google الآن بارعاً جداً في قراءة الصور المحملة كسولاً، وسيعزز تحسين الأداء ترتيبك.

هل تعمل هذه الأداة مع WordPress؟

نعم. يمكنك استخدام الكود الخاص بنا في مربعات 'Custom HTML' أو إضافات مقتطفات الكود لتحسين صفحات الهبوط المزدحمة بالصور يدوياً.

ما الفرق بين هذا وبين 'loading=lazy'؟

الخاصية 'loading=lazy' الأصلية بسيطة ولكنها لا توفر عنصراً نائباً. تضيف أداتنا LQIP وتأثير التلاشي لشعور أكثر احترافية.

هل يتطلب الكود أي مكتبات مثل jQuery؟

لا. الكود المولد لدينا هو JavaScript خام 100% (vanilla)، مما يجعله خفيف الوزن ومستقلياً وبدون أي اعتمادات خارجية.

هل هذه الأداة مجانية للمطورين؟

نعم! مولدنا مجاني 100% للمشاريع الشخصية والتجارية، من المدونات الصغيرة إلى تطبيقات الشركات الكبرى.

كيف أعرف أن العنصر النائب صغير بما يكفي؟

نحن نستهدف حجماً أقصى يبلغ 1 كيلوبايت لكل عنصر نائب. معظمها في الواقع حوالي 500 بايت، وهو أقل من عدة جمل نصية.

هل الكود المولد متوافق مع الهواتف المحمولة؟

نعم. Intersection Observer مدعوم من Safari و Chrome و Firefox على جميع الأجهزة المحمولة الحديثة (iOS و Android).

هل يصلح هذا المولد لخاصية background-image في CSS؟

هذا الإصدار مخصص لوسوم `<img>`. بالنسبة لصور الخلفية، المبادئ متشابهة لكن كود التنفيذ يختلف.

كيف أحافظ على خصوصية صوري الأصلية؟

بما أن أداتنا تعالج كل شيء محلياً في متصفحك عبر JS، فإن بياناتك الأصلية عالية الدقة لا تغادر جهاز الكمبيوتر الخاص بك أبداً.