JQuery Lazyload изображения и веб-с резервным - PullRequest
Новая
       23

JQuery Lazyload изображения и веб-с резервным

0 голосов
/ 07 декабря 2018

Я немного озадачен тем, как использовать решение для отката изображения в сочетании с jquery lazyload.

В настоящий момент мои изображения интегрированы следующим образом: 

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

Но решение для восстановления webpимеет следующую структуру: 

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

Мои вопросы:

  1. Должен ли я также давать стили / классы вебпу?
  2. встроенная lazyload ищет data-original, поэтому она не работает с srcset.Есть ли решение для этого?

1 Ответ

0 голосов
/ 17 марта 2019

Я нашел решение. Требуется добавить данные в определенном формате с пользовательским атрибутом.этот код прекрасно работает и помогает при оптимизации страницы добавлять изображения в Интернете или в другом формате.

Примечание : все изображения в формате с одинаковым именем, например,

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

Просто измените расширение, а не имя 

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

Ленивая загрузка теперь работает отлично.

...