اعدادات LazyLoad

Bot X

اعدادات LazyLoad

صورة كسول / غامبار

أولاً، يمكنك التحميل على الوسائط كالمعتاد، ثم الانتقال إلى عرض HTML في الزاوية العلوية اليسرى.

كارا بسيطة

انتبه إلى التعليمات البرمجية الخاصة بك، وستحصل بالتأكيد على تعليمات برمجية غير منتظمة مثل هذا

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJbXfUkNIFZQ3AksqDBXdWWGQXhBxfCB8KwgWdwO2D5p9trN0NX9raH4BW8M_d251B8tMQyfDc8iWEAwdWP8K1h3t4NX6eblRyHxw8-5ch4oE4nGmeA8MkvQsTLQEVnltnPwf6LSqvv2M/s2048/lamp.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1371" data-original-width="2048" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJbXfUkNIFZQ3AksqDBXdWWGQXhBxfCB8KwgWdwO2D5p9trN0NX9raH4BW8M_d251B8tMQyfDc8iWEAwdWP8K1h3t4NX6eblRyHxw8-5ch4oE4nGmeA8MkvQsTLQEVnltnPwf6LSqvv2M/s320/lamp.jpg" width="320" /></a></div>

ثم أضف الكود <noscript> ... </noscript>، على سبيل المثال شيء من هذا القبيل:

<noscript>
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJbXfUkNIFZQ3AksqDBXdWWGQXhBxfCB8KwgWdwO2D5p9trN0NX9raH4BW8M_d251B8tMQyfDc8iWEAwdWP8K1h3t4NX6eblRyHxw8-5ch4oE4nGmeA8MkvQsTLQEVnltnPwf6LSqvv2M/s2048/lamp.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1371" data-original-width="2048" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJbXfUkNIFZQ3AksqDBXdWWGQXhBxfCB8KwgWdwO2D5p9trN0NX9raH4BW8M_d251B8tMQyfDc8iWEAwdWP8K1h3t4NX6eblRyHxw8-5ch4oE4nGmeA8MkvQsTLQEVnltnPwf6LSqvv2M/s320/lamp.jpg" width="320" /></a></div>
</noscript>

الطريقة اليدوية

بالنسبة للطريقة اليدوية، يتم ذلك لجعل الكود أكثر نظافة، قم أولاً بأخذ رمز علامة الصورة من الصورة التي قمت بتحميلها إلى Blogger،

<img border="0" data-original-height="1371" data-original-width="2048" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJbXfUkNIFZQ3AksqDBXdWWGQXhBxfCB8KwgWdwO2D5p9trN0NX9raH4BW8M_d251B8tMQyfDc8iWEAwdWP8K1h3t4NX6eblRyHxw8-5ch4oE4nGmeA8MkvQsTLQEVnltnPwf6LSqvv2M/s320/lamp.jpg" width="320" />

ثم يمكنك إدخال الرمز بين<noscript>...</noscript>الملونة أدناه، تأكد من وجودهاعرضأوعرض البيانات الأصليةوتم ضبطه. بالحجم الكامل يمكنك صنعهالعرض = "728"

<noscript>
<img border="0" data-original-height="1371" data-original-width="2048" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJbXfUkNIFZQ3AksqDBXdWWGQXhBxfCB8KwgWdwO2D5p9trN0NX9raH4BW8M_d251B8tMQyfDc8iWEAwdWP8K1h3t4NX6eblRyHxw8-5ch4oE4nGmeA8MkvQsTLQEVnltnPwf6LSqvv2M/s320/lamp.jpg" width="320" />
</noscript>

كسول ادسنس

ما عليك سوى إدخال الرمز كما هو ملون في أداة التخطيط، ويمكنك الحصول على رمز الإعلان هذا. على الجانب الأيسر من قائمة صفحة Adsense، انقر فوق "الإعلانات"، وحدد "نظرة عامة"، وبعد الدخول إلى صفحة "نظرة عامة"، حدد علامة التبويب الثانية.حسب الوحدة الإعلانية، واختر الإعلان الذي يناسب ذوقك.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890XXXXXX"
     crossorigin="anonymous"></script>
<!-- adsense -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-1234567890XXXXXX"
     data-ad-slot="123457XXXXX"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

Lazyload Iframe والفيديو والصوت

بالنسبة إلى Lazyload بخلاف الصور مثل Iframes (Youtube، خريطة Google، وما إلى ذلك)، ومقاطع الفيديو والصوت

<iframe class="lazyload" title="Youtube"
  width="400" height="300" allowfullscreen
  allow="accelerometer;autoplay;encrypted-media;gyroscope;picture-in-picture"
  data-style="background: url(https://img.youtube.com/vi/Uz970DggW7E/hqdefault.jpg) 50% 50% / cover no-repeat;"
  data-src="https://www.youtube.com/embed/Uz970DggW7E"></iframe>

<picture class="lazyload">
  <source media="(min-width:800px)" data-srcset="https://picsum.photos/800/1200">
  <source media="(min-width:600px)" data-srcset="https://picsum.photos/600/900">
  <img data-src="https://picsum.photos/200/300" alt="Photo" style="width:auto;">
</picture>

<audio class="lazyload" controls>
  <source data-src="sound.ogg" type="audio/ogg">
  <source data-src="sound.mp3" type="audio/mpeg">
  Your browser does not support the audio tag.
</audio>

<video class="lazyload" width="320" height="240" controls>
  <source data-src="movie.mp4" type="video/mp4">
  <source data-src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

شكرًا على https://github.com/shinsenter/defer.js/

شارك المقال مع اصدقائك

صورة كسول / غامبار

كارا بسيطة

الطريقة اليدوية

كسول ادسنس

Lazyload Iframe والفيديو والصوت

المشاركات الشائعة