How to Delay Image Loading Before Scrolling Pages

 

How to Delay Image Loading Before Scrolling Pages

ஒரு Blog-இல் Loading Load பங்களிக்கும் Factors ஒன்று Image Content, இங்கே Page-யை உருட்டுவதற்கு முன் Image-யை Loading எவ்வாறு தாமதப்படுத்துவது என்பதற்கான குறிப்புகளை TamilBloggers.org வழங்கும்.

இங்கே Page-யை உருட்டுவதற்கு முன் Image-களை Loading தாமதம் ஆகும், ஒரு Page-யை Loading ஆகும் போது நாம் Page-யை உருட்டும் வரை Image ஏற்றப்படாது மேலும் அது Blog-இல் வேகத்தை அதிகரிக்கும்.  இது போன்ற ஒரு செயல்முறையை நானும் இங்கே பகிர்ந்துள்ளேன்.  சோம்பேறி அளவுகளுடன் Blog Loading அதிகரிப்பது எப்படி.

How to Delay Image Loading Before Scrolling Pages

முதலில், Blogger> Theme மெனுவைக் Click செய்யவும்> HTML Edit என்பதைக் Click செய்யவும்> பின்னர் கீழே உள்ள Coding கண்டறிந்து சேர்க்கவும் </body>

Code 1

<script> //<![CDATA[ // LazyLoad function loadScript(d){var o=document.createElement("script");o.src=d,document.body.appendChild(o)}function downloadJSAtOnload(){loadScript("https://cdn.jsdelivr.net/gh/Arlina-Design/phantom@master/lazyarlinas.js")}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload; //]]> </script>

உங்களில் ஏற்கனவே Lazysizes Coding சேர்த்தவர்களுக்கு, இந்த version-இல் Coding மாற்றவும்

Code 2

<script> //<![CDATA[ // Lazysizes var lazysizer=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&!1===lazysizer||0!=document.body.scrollTop&&!1===lazysizer)&&(!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://cdn.jsdelivr.net/gh/Arlina-Design/phantom@master/lazysarline.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),lazysizer=!0)},!0); //]]> </script>

மேலே உள்ள Code களில் ஒன்றைத் தேர்ந்தெடுக்கவும்

Lazysizes பற்றிய Post-யில் உள்ள பயன்பாடு கிட்டத்தட்ட ஒரே மாதிரியானது, Theme-மில் உள்ள Image அனைத்தையும் நீங்கள் கண்டுபிடிக்க வேண்டும்.  Code இப்படி இருக்கும்:

<img...

உதாரணத்திற்கு :

<img src='//www.blogger.com/img/icon_delete13.gif'/>

Code 1 க்கு class='lazy' மற்றும் Code 2 க்கான class='lazyload' போன்ற Markup-ல் சேர்க்கவும்:

<img class='lazy' data-src='//www.blogger.com/img/icon_delete13.gif' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>

Src ஐ data-src ஆக மாற்றி src = 'data: image/png;  அடிப்படை 64, R01GOD 1 ஹகபாத்/ACWAAAAAQABAAACADS = 'af ter data-src

அல்லது இந்த உதாரணம்:

<img expr:alt='data:post.title' expr:src='resizeImage(data:post.firstImageUrl, 280, &quot;300:200&quot;)' height='186' width='280'/>

எனவே இது போல:

<img class='lazy' expr:alt='data:post.title' expr:data-src='resizeImage(data:post.firstImageUrl, 280, &quot;300:200&quot;)' height='186' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=' width='280'/>

Theme-மில் உள்ள அனைத்து img Markup-பிற்கும் மேலே உள்ளவற்றைச் செய்யுங்கள்.  Img Markup-பில் ஏற்கனவே ஒரு Class இருந்தால் என்ன செய்வது?  முதல் Class-க்குப் பிறகு நீங்கள் Lazy அல்லது Lazyload-யைச் சேர்க்க வேண்டும், எடுத்துக்காட்டாக:

<img class='blogger lazy' data-src='//www.blogger.com/img/icon_delete13.gif' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>

முடிந்ததும், Theme-யைச் Save செய்து முடிவுகளை உங்கள் Blog-இல் பார்க்கவும்.

அடுத்து, நீங்கள் GTmetrix இல் சரிபார்க்கக்கூடிய Expire அகும் Title-கள் பிரிவை மேம்படுத்த, Post Editor-ரில் உள்ள Image Link-ல் s1600 மற்றும் s640 ஐ மாற்ற வேண்டும்.  இது போன்ற உதாரணங்கள்:

<div class="separator" style="clear: both; text-align: center;"> <a href="https://1.bp.blogspot.com/-6T0m8rLAJ7c/X06PP4q5nqI/AAAAAAAALE0/VSNyffwvSzA94YYGb2GI3SKHhJW_LeUBQCLcBGAsYHQ/s1600/Cara%2BMemasang%2BWidget%2BNewsletter%2Bdi%2BBlogger.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Memasang Widget Newsletter di Blogger" class="lazyload" style="border: none;" data-original-height="800" data-original-width="1200" height="426" src="https://1.bp.blogspot.com/-6T0m8rLAJ7c/X06PP4q5nqI/AAAAAAAALE0/VSNyffwvSzA94YYGb2GI3SKHhJW_LeUBQCLcBGAsYHQ/s640/Cara%2BMemasang%2BWidget%2BNewsletter%2Bdi%2BBlogger.png" title="Cara Memasang Widget Newsletter di Blogger" width="640" /></a></div>

ஒவ்வொரு Post Image-லும் -rw சேர்க்கவும்

<div class="separator" style="clear: both; text-align: center;"> <a href="https://1.bp.blogspot.com/-6T0m8rLAJ7c/X06PP4q5nqI/AAAAAAAALE0/VSNyffwvSzA94YYGb2GI3SKHhJW_LeUBQCLcBGAsYHQ/s1600-rw/Cara%2BMemasang%2BWidget%2BNewsletter%2Bdi%2BBlogger.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Memasang Widget Newsletter di Blogger" class="lazyload" style="border: none;" data-original-height="800" data-original-width="1200" height="426" src="https://1.bp.blogspot.com/-6T0m8rLAJ7c/X06PP4q5nqI/AAAAAAAALE0/VSNyffwvSzA94YYGb2GI3SKHhJW_LeUBQCLcBGAsYHQ/s640-rw/Cara%2BMemasang%2BWidget%2BNewsletter%2Bdi%2BBlogger.png" title="Cara Memasang Widget Newsletter di Blogger" width="640" /></a></div>


தயவுசெய்து கவனிக்கவும், என் நண்பர் ஒவ்வொரு Post Image-லும் -rw சேர்த்திருந்தால். Third Party Widget-களான சமீபத்திய Post-கள், சீரற்ற Post-கள் போன்றவற்றால் Image-யை படிக்க முடியாது.

Okay, Page-யை Scrolling முன் Image-யை Loading எவ்வாறு தாமதப்படுத்துவது என்பது பற்றி TamilBloggers.org இருந்து.  Article பயனுள்ளதக இருந்தது.


Tags

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.