New to the community? Start here

Smush LazyLoad Issue

My image dimensions are distorted when I enable the LazyLoad feature. But when the viewport is resized, it gets fixed. Can you please check?

Tue, 17 Sep 2019 13:05:52
More Smush Pro discussions
Smush Pro
  • Adam
    • Support Gorilla

    Hi Ryan,

    I hope you’re doing fine today!

    We have already asked our second line support team to investigate the issue. They’ll look into it and, if necessary, include our developers in the case so please keep track of this ticket and we’ll be updating you here as soon as we get to know more about what’s causing it and how to solve it.

    Best regards,
    Adam

  • Alessandro
    • Nightcrawler & Daydreamer

    Hello Ryan, thanks using Smush Pro!

    We noticed that your issue is cause by wrong calculation on page’s load, as images do not present yet in the page.

    We have developed some fixes to calculate proper the images as soon as they lazy load.

    Add the following snippets to your theme Settings:

    Go to Salient > General Settings > CSS/Script Related section.

    Append to Custom CSS Code

    
.infinite_scroll .work-item img:not([srcset]){
    width: 100%;
}

    Append to Custom JS Code

    
<script type="text/javascript">
(function($) {
    $(window).on('scroll', function() {
        var iso = $('.infinite_scroll').data('isotope');
        if( !iso ) return;
        setTimeout(function(){ $('.infinite_scroll').isotope('layout'); }, 200);
    });
    $(window).load(function() {
        var iso = $('.infinite_scroll').data('isotope');
        if( !iso ) return;
        $('.infinite_scroll').isotope('layout');
    });
})( jQuery );
</script>

    Let us know if this worked.

    Hope this helps.

    Kind regards,
    Alex.