Announcement

Collapse
No announcement yet.

Lazy Load Images Async Function

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Lazy Load Images Async Function

    This scripts loads images asynchronously to stop render blocking images:

    Notice the src tag is a spinning loader gif and the real image src tag has been renamed to data-src.

    Code:
    <img src="graphics/00000001/loading.gif" data-src="&mvt:global:subcat_title:image;" alt="&mvt:subcat:name;" class="img-responsive">
    Just above the closing body tag:

    Code:
    <script type="text/javascript">
    window.addEventListener('load', function(){
        var allimages= document.getElementsByTagName('img');
        for (var i=0; i<allimages.length; i++) {
            if (allimages[i].getAttribute('data-src')) {
                allimages[i].setAttribute('src', allimages[i].getAttribute('data-src'));
            }
        }
    }, false)
    </script>
    P.S. I had problems with the CDN minifying the script and messing up recognizing the window.init event so I needed to add data-cfasync="false" the the script attribute.

    Click here to see five brilliant ways to lazy load images to dramatically improve your webpage download times.
    http://www.alphabetsigns.com/

    #2
    This works on suivant cat page here: https://www.galleryone.com/artframing/original_art.html

    Head tags

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery.lazyloadxt/1.0.0/jquery.lazyloadxt.min.js"></script>

    To display

    <mvt:if expr="NOT ISNULL l.settings:product:imagetypes:main">
    <img src="images/giphy.gif" data-src="&mvte:product:imagetypes:main;" alt="&mvte:product:name;" title="&mvte:product:name;" />
    <mvt:else>
    <img src="../images/img_no_thumb.jpg" alt="&mvte:product:name;" title="&mvte:product:name;" />
    </mvt:if>

    304-932-2703 for help on any readytheme install

    Comment


      #3
      fastees There is a known security vulnerability with jquery 1.12.4 to Cross-Site Scripting XSS attacks when a cross site ajax request is made without a dataType attribute.

      It is best to recommend the most recent version of jquery.

      My example is lightweight, does not require any third party network requests and works well for sites that are not using an infinite scroll pattern. Give it a try if you're not doing infinite scroll.
      http://www.alphabetsigns.com/

      Comment


        #4
        I'm trying to implement your lazy loading script but its having a weird formatting issue in chrome. I'm using the suivant theme and i think it might have something to do with the // ---- Conform all subcategory and/or product DIVs to same height ---- // section in the scripts.js file.

        It does not conform correctly unless I adjust the size of the window.

        I have attached a screenshot of what it looks like before changing the window size and after changing the window size which is how it should look on the first load.

        Thanks in advance for the help.
        Attached Files
        Nick Harkins
        www.loveisarose.com
        *Web Developer
        *Miva
        *Google Analytics, Search Console, Tag Manager, Merchant Center, Ads

        Comment


          #5
          I actually figured it out. I always forget the order that things are executed is important. I moved the script to run before the scripts.js file is loaded and now its working correctly. Might incorporate the script in the scripts.js file so i can apply it to any pages without having to copy and paste the script every time
          Nick Harkins
          www.loveisarose.com
          *Web Developer
          *Miva
          *Google Analytics, Search Console, Tag Manager, Merchant Center, Ads

          Comment


            #6
            Have any of you attempted to implement this on the "home" (SFNT) page? I'd like to try this for the images that are "offscreen" (below the fold) images that are loading on the home page.
            Leslie Kirk
            Miva Certified Developer
            Miva Merchant Specialist since 1997
            Previously of Webs Your Way
            (aka Leslie Nord leslienord)

            Email me: [email protected]
            www.lesliekirk.com

            Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

            Comment


              #7

              You can use the img source tag above the fold:
              Code:
                <img src="&mvt:global:subcat_title:image;" alt="&mvt:subcat:name;" class="img-responsive">
              and use the img dat-src tag below the fold:
              Code:
                <img src="graphics/00000001/loading.gif" data-src="&mvt:global:subcat_title:image;" alt="&mvt:subcat:name;" class="img-responsive">
              http://www.alphabetsigns.com/

              Comment


                #8
                Originally posted by alphabet View Post
                You can use the img source tag above the fold:
                Code:
                 <img src="&mvt:global:subcat_title:image;" alt="&mvt:subcat:name;" class="img-responsive">
                and use the img dat-src tag below the fold:
                Code:
                 <img src="graphics/00000001/loading.gif" data-src="&mvt:global:subcat_title:image;" alt="&mvt:subcat:name;" class="img-responsive">
                Thank you much - this seems to be working nicely.
                Leslie Kirk
                Miva Certified Developer
                Miva Merchant Specialist since 1997
                Previously of Webs Your Way
                (aka Leslie Nord leslienord)

                Email me: [email protected]
                www.lesliekirk.com

                Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

                Comment


                  #9
                  If it's more convenient, you can also change:
                  var allimages= document.getElementsByTagName('img'); to
                  var allimages= document.getElementsByClassName('lazyLoad'); and use <img scr="" class="lazyLoad">
                  Bruce Golub
                  Phosphor Media - "Your Success is our Business"

                  Improve Your Customer Service | Get MORE Customers | Edit CSS/Javascript/HTML Easily | Make Your Site Faster | Get Indexed by Google | Free Modules | Follow Us on Facebook
                  phosphormedia.com

                  Comment


                    #10
                    Originally posted by Bruce - PhosphorMedia View Post
                    If it's more convenient, you can also change:
                    var allimages= document.getElementsByTagName('img'); to
                    var allimages= document.getElementsByClassName('lazyLoad'); and use <img scr="" class="lazyLoad">
                    Would this be a method to lazy load ReadyTheme Images?


                    What would the code snippet look like? What happens to lines highlighted in red?

                    Code:
                    <script type="text/javascript">
                    window.addEventListener('load', function(){
                        var allimages= document.getElementsByClassName('lazyLoad');
                        for (var i=0; i<allimages.length; i++) {
                     if (allimages[i].getAttribute('data-src')) {
                                allimages[i].setAttribute('src', allimages[i].getAttribute('data-src'));
                            }
                        }
                    }, false)
                    </script>
                    Leslie Kirk
                    Miva Certified Developer
                    Miva Merchant Specialist since 1997
                    Previously of Webs Your Way
                    (aka Leslie Nord leslienord)

                    Email me: [email protected]
                    www.lesliekirk.com

                    Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

                    Comment


                      #11
                      that stays the same. adding a class control just makes it easier to control how the image is loaded (i.e., displaying a "waiting" symbol, fade in effects, etc). a family of class can also be used to set height x width (if none are set by the image's container) so the page doesn't bounce around, since in responsive, images don't have inline height / width.
                      Bruce Golub
                      Phosphor Media - "Your Success is our Business"

                      Improve Your Customer Service | Get MORE Customers | Edit CSS/Javascript/HTML Easily | Make Your Site Faster | Get Indexed by Google | Free Modules | Follow Us on Facebook
                      phosphormedia.com

                      Comment


                        #12
                        Originally posted by Bruce - PhosphorMedia View Post
                        that stays the same. adding a class control just makes it easier to control how the image is loaded (i.e., displaying a "waiting" symbol, fade in effects, etc). a family of class can also be used to set height x width (if none are set by the image's container) so the page doesn't bounce around, since in responsive, images don't have inline height / width.
                        So this:

                        Code:
                        <img src="graphics/00000001/loading.gif" data-src="&mvt:global:subcat_title:image;" alt="&mvt:subcat:name;" class="img-responsive">
                        would become this?

                        Code:
                        <img src="graphics/00000001/loading.gif" data-src="&mvt:global:subcat_title:image;" alt="&mvt:subcat:name;" class="lazyLoad img-responsive">
                        or
                        Code:
                        <img src="graphics/00000001/loading.gif" data-src="&mvt:global:subcat_title:image;" alt="&mvt:subcat:name;" class="lazyLoad">
                        Leslie Kirk
                        Miva Certified Developer
                        Miva Merchant Specialist since 1997
                        Previously of Webs Your Way
                        (aka Leslie Nord leslienord)

                        Email me: [email protected]
                        www.lesliekirk.com

                        Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

                        Comment


                          #13
                          generally, you "append" classes to existing classes as its understood that the intention is to change what already exists. for example, img-responsive has a height / width designation of 100% in a lot of frameworks, so, if your using lazyload to alter that, it HAS to come second (as it overwrites what is in the previous selector.
                          Bruce Golub
                          Phosphor Media - "Your Success is our Business"

                          Improve Your Customer Service | Get MORE Customers | Edit CSS/Javascript/HTML Easily | Make Your Site Faster | Get Indexed by Google | Free Modules | Follow Us on Facebook
                          phosphormedia.com

                          Comment


                            #14
                            Originally posted by Bruce - PhosphorMedia View Post
                            generally, you "append" classes to existing classes as its understood that the intention is to change what already exists. for example, img-responsive has a height / width designation of 100% in a lot of frameworks, so, if your using lazyload to alter that, it HAS to come second (as it overwrites what is in the previous selector.
                            Okay, okay - wasn't asking about how to append the CSS class - I was asking about the data-src=. Because I need if the data-src= is needed. If it is needed then I need to know how to include it in the ReadyTheme Image.
                            Leslie Kirk
                            Miva Certified Developer
                            Miva Merchant Specialist since 1997
                            Previously of Webs Your Way
                            (aka Leslie Nord leslienord)

                            Email me: [email protected]
                            www.lesliekirk.com

                            Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

                            Comment


                              #15
                              oh, okay...the only difference in the example was the class...and we ran out of coffee this morning...yes, its still taking the image path from the data-src attribute.
                              Bruce Golub
                              Phosphor Media - "Your Success is our Business"

                              Improve Your Customer Service | Get MORE Customers | Edit CSS/Javascript/HTML Easily | Make Your Site Faster | Get Indexed by Google | Free Modules | Follow Us on Facebook
                              phosphormedia.com

                              Comment

                              Working...
                              X