خاصية التحميل الكسول Lazyload في قالب جت ثيم

تأجيل تحميل الصور Lazyload Img

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

الطريقة الأولى

عند إضافتك لصورة في موضوع بلوجر، بالتأكيد ستحصل على كود غير منتظم كالتالي:

<div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/--aAiL2sNaTU/Xq8NpeHV_-I/AAAAAAAAAFs/n9cz4Z6i2_g37CgGT4Id_3D-tUSCwUAjQCPcBGAYYCw/s2048/lamp.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1371" data-original-width="2048" src="https://1.bp.blogspot.com/--aAiL2sNaTU/Xq8NpeHV_-I/AAAAAAAAAFs/n9cz4Z6i2_g37CgGT4Id_3D-tUSCwUAjQCPcBGAYYCw/s320/lamp.jpg" width="320" /></a></div>

 كل ما عليك فعله هو إدراج كود الصورة بين العلامتين <noscript> ... </noscript> ليصبح الكود كالتالي:

<noscript>
<div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/--aAiL2sNaTU/Xq8NpeHV_-I/AAAAAAAAAFs/n9cz4Z6i2_g37CgGT4Id_3D-tUSCwUAjQCPcBGAYYCw/s2048/lamp.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1371" data-original-width="2048" src="https://1.bp.blogspot.com/--aAiL2sNaTU/Xq8NpeHV_-I/AAAAAAAAAFs/n9cz4Z6i2_g37CgGT4Id_3D-tUSCwUAjQCPcBGAYYCw/s320/lamp.jpg" width="320" /></a></div>
</noscript>

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

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

<img border="0" data-original-height="1371" data-original-width="2048" src="https://1.bp.blogspot.com/--aAiL2sNaTU/Xq8NpeHV_-I/AAAAAAAAAFs/n9cz4Z6i2_g37CgGT4Id_3D-tUSCwUAjQCPcBGAYYCw/s320/lamp.jpg" width="320" />

ثم يمكنك إدخال الكود أعلاه بين <noscript> ...</noscript>الملونة أدناه ، تأكد من وجودها width أو data-original-width وقد تم ضبطه. للحجم الكامل يمكنك جعله width="728"

<noscript>
<img border="0" data-original-height="1371" data-original-width="2048" src="https://1.bp.blogspot.com/--aAiL2sNaTU/Xq8NpeHV_-I/AAAAAAAAAFs/n9cz4Z6i2_g37CgGT4Id_3D-tUSCwUAjQCPcBGAYYCw/s320/lamp.jpg" width="320" />
</noscript>

تأخير إعلانات أدسنس Lazyload Adsense

ما عليك سوى إدخال كود الإعلان كما هو ملون في أداة التخطيط / التخطيط ، ويمكنك الحصول على رمز الإعلان هذا. على الجانب الأيسر من قائمة صفحة 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>

تأجيل تحميل الفيديو من يوتيوب Youtube Layload 

هذه الخاصية ليست موجودة في القالب الأصلي ، وإنما قمت بإضافتها للنسحة المعربة (حصري لنسخة القالب المعربة من قبل مدونة فيصل).

الطريقة الأولى

طريقة الإستخدام

  <!--[ Lazy youtube ]-->
<div class='lazyYoutube' data-embed='Youtube_video_ID'>
  <div class='playBut'>
    <svg class='svg-play' viewbox='0 0 213.7 213.7'><polygon class='triangle' points='73.5,62.5 148.5,105.8 73.5,149.1'></polygon><circle class='circle' cx='106.8' cy='106.8' r='103.3'></circle></svg></div></div>
  

الطريقة الثانية

تأخير تحميل إطار iframe بوظيفة defer.js:

مثال

الإستخدام

<!--[ Lazysize iframe ]-->

<div class='videoYt'>
  <iframe title='Lazy Iframe' class='lazyload' data-src='//www.youtube.com/embed/Youtube_video_ID' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe>
</div>
  

تأجيل تحميل الفريم والصوت Lazyload Iframe

بالنسبة لخاصية تأجيل الفديو والصوت وأي فريم فبنفس الطريقة للصور Lazyload إلى جانب الصور مثل Iframe (Youtube و Google map وما إلى ذلك) والفيديو والصوت.

<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/