Lazy Load Images Async Function

[alphabet]

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.

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

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

[fastees]

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

[alphabet]

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.

[SidFeyDesigns]

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.

[SidFeyDesigns]

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

[lesliekirk]

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.

[alphabet]

You can use the img source tag above the fold:

  <img src="&mvt:global:subcat_title:image;" alt="&mvt:subcat:name;" class="img-responsive">

and use the img dat-src tag below the fold:

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

[lesliekirk]

You can use the img source tag above the fold:

 <img src="&mvt:global:subcat_title:image;" alt="&mvt:subcat:name;" class="img-responsive">

and use the img dat-src tag below the fold:

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

[Bruce - PhosphorMedia]

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

[lesliekirk]

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?

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

[Bruce - PhosphorMedia]

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.

[lesliekirk]

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:

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

would become this?

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

or

<img src="graphics/00000001/loading.gif" data-src="&mvt:global:subcat_title:image;" alt="&mvt:subcat:name;" class="lazyLoad">

[Bruce - PhosphorMedia]

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.

[lesliekirk]

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.

[Bruce - PhosphorMedia]

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.