CODEWITHSUNDEEP
performancelazy-loadingwebpjquery-lazyload
Krystian
Krystian

Reputation: 987

jquery lazyload images and webp with fallback

I am a bit confused how to use the picture fallback solution in combination with jquery lazyload. I use this library: 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"></script>

At the moment my images are integrated like this:

<img class="center lazy" data-original="./bilder/uebersetzung-marketing-bwl.png" width="593>

But webp fallback solution is structured like this:

<picture>
      <source class="center lazy" srcset="./bilder/Uebersetzungsdienst-Jena-BM-Translations.webp" type="image/webp">
      <img class="center lazy" src="./bilder/Uebersetzungsdienst-Jena-BM-Translations.png" width="1920" height="97" alt="Uebersetzungsdienst-Jena-BM-Translations">
</picture>

My question: the integrated lazyload looks for data-original so it does not work with srcset. Is there a solution for that?

If possible I would prefer to do not use another library but "simply" add some code.

Upvotes: 3

Views: 2321

Answers (1)

Faizan Ansari
Faizan Ansari

Reputation: 21

I've found the solution.It is required to add data in specific format with custom attribute. this code work perfectly and help for page optimization you add web or other format images.

Note: All format images with same name like,

  • image_1.png
  • image_1.jpg
  • image_1.webp

Just change extension not name 

<!-- Add this for show image  -->
<div class="lazy" data-name="image path1 without extension |image default extension (.png)|image alt tag|image classes"></div>
<div class="lazy" data-name="image path2 without extension |image default extension (.png)|image alt tag|image classes"></div>
<div class="lazy" data-name="image path3 without extension |image default extension (.png)|image alt tag|image classes"></div>

<!-- Add scripts in bottom  -->
<script>
function lazy_load(){
    $('.lazy').each(function(img){
        var scrollTop = window.pageYOffset;
        var this_offset=$(this).offset().top + $(this).outerHeight();
        var window_offset=$(window).scrollTop()+ $(window).height();
        if($(this).offset().top + $(this).outerHeight() <= ($(window).scrollTop()+ $(window).height())){
            var path_src=$(this).attr('data-name');
            var split_data=path_src.split('|');
            var img_html='<picture>'+
                '<source srcset="'+split_data[0]+'.webp" type="image/webp">'+
                '<source srcset="'+split_data[0]+split_data[1]+'" type="image/'+split_data[1].replace('.','')+'">'+
                '<img src="'+split_data[0]+split_data[1]+'" alt="'+split_data[2]+'" class="'+split_data[3]+'">'+
                '</picture>';
            $(this).html(img_html);
            $(this).show(1000);
            $(this).removeClass('lazy');
        }
    });
}
$(window).on('resize scroll', function(){
    lazy_load();
});
</script>

Lazy loading is now working perfectly.

Upvotes: 2

Related Questions