Skip to main content

all images lazy load remove fcp final

Ye code jo aapne diya hai, lazy loading functionality ke liye hai jo images ko lazy load karta hai Intersection Observer ka istemal karke.

Jab aap ye code paste karenge, ye kuch functionalities provide karega:

  1. Lazy Loading Images: Ye JavaScript code images ko lazy load karta hai. Jab browser viewport mein aati hai image, tab hi wo actual src attribute mein load hoti hai, isse initial page load time decrease hota hai.

  2. Alt Tag Generation: Image ka alt attribute generate kiya jata hai based on image ka filename. Isse accessibility ke liye better text generate hota hai jo visually impaired users ke liye helpful hota hai.

  3. Styling for a Follow Form: Ye CSS code ek form ke styling ke liye hai. Isse form ko specific tarike se style kiya gaya hai.

  4. Form Container Styling: Form container ke liye CSS styling provide ki gayi hai jisse wo specific design aur layout follow kare.

  5. Powered By Link: Powered by link styling ke liye di gayi hai.

Ye code snippet aapke web page ko visually enhance karne ke liye use kiya ja sakta hai aur images ko lazy load karke initial page load time ko reduce karne mein madad karega. Follow form ke liye bhi specific styling provide ki gayi hai.



👇paste this code just before  the </body> tag


<script type="text/javascript">

  function lazyLoadImages() {

    var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));


    if ("IntersectionObserver" in window) {

      let lazyImageObserver = new IntersectionObserver(function(entries, observer) {

        entries.forEach(function(entry) {

          if (entry.isIntersecting) {

            var lazyImage = entry.target;

            lazyImage.src = lazyImage.dataset.src;

            lazyImage.alt = lazyImage.src.split('/').pop().split('.')[0].replace(/-/g, ' ').replace(/\b\w/g, function(txt) { return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase(); });

            lazyImage.classList.remove("lazy");

            lazyImageObserver.unobserve(lazyImage);

          }

        });

      });


      lazyImages.forEach(function(lazyImage) {

        lazyImageObserver.observe(lazyImage);

      });

    }

  }


  document.addEventListener("DOMContentLoaded", function() {

    lazyLoadImages();

  });

</script>

paste this just below the <head>in theme

paste this👇

<style type="text/css">
  .followit--follow-form-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .form-preview {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    margin-top: 30px !important;
    padding: clamp(17px, 5%, 40px) clamp(17px, 7%, 50px) !important;
    max-width: none !important;
    border-radius: 6px !important;
    box-shadow: 0 5px 25px rgba(34, 60, 47, 0.25) !important;
  }
  /* ... (rest of your CSS code) ... */
  .followit--follow-form-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .powered-by-line img {
    margin-left: 10px !important;
    height: 1.13em !important;
    max-height: 1.13em !important;
  }
</style>





Labels:

Comments

Post a Comment

Popular posts from this blog

ai tool

 https://smodin.io/free-english-rewriter-and-spinner/ai-detection-remover ai detecter and removal https://originality.ai/blog/highlight-ai-text= for ai highlighter and affiliate marketing https://gptzero.me/  = ai writing detector and highlighter  https://www.zerogpt.com/           = ai content writer detector https://plagiarism-remover.com/humanize-ai-text/           = humanize writer
Post a Comment
Read more

Add Code Box

  HTML CSS And Java Script  <style> .K2_CBox{position:relative;background:#fff;width:100%;border-radius:6px;box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;padding:10px;margin:30px 0 30px} .K2_CBox .CB_Heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px} .K2_CBox .CB_Heading span{margin:0;font-weight:700;font-family:inherit;font-size:1.1rem} .K2_CBox .C_box_main{cursor:pointer;display:inline-flex;align-items:center;padding:12px;outline:0;border:0;border-radius:50%;background:#004cbd;transition:all .3s ease;-webkit-transition:all .3s ease}.K2_CBox .C_box_main:hover{opacity:.8}.K2_CBox .C_box_main .CBox_icn{flex-shrink:0;display:inline-block;width:18px;height:18px;background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23fefefe' stroke-linecap='round' stroke-linejoin='round' stroke-wi...
Post a Comment
Read more

create a list of 100 things someone may now know about SEO

  create a list of 100 things someone may now know abouT SEO stands for Search Engine Optimization. SEO is the process of optimizing a website to improve its visibility and ranking on search engines. Google is the most popular search engine, followed by Bing and Yahoo. SEO involves both on-page and off-page optimization techniques. On-page optimization includes optimizing the content and structure of a website. Off-page optimization includes building backlinks to a website. SEO requires constant monitoring and updating to maintain rankings. Keyword research is the foundation of SEO. Long-tail keywords are easier to rank for than short-tail keywords. Keyword stuffing is a black hat SEO technique that can get a website penalized. Meta tags are important for on-page optimization. Title tags and meta descriptions should be unique and relevant to the page. Header tags (H1, H2, H3) are important for on-page optimization. Content should be well-written and provide value to the reader. Dup...
Post a Comment
Read more