Igor150195

Ленивая загрузка картинок 2

Apr 13th, 2021 (edited)
852
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. grLazyLoad: function(params) {
  2.                 var elem = 'gr_images_lazy_load';
  3.                 var margin = '10px';
  4.  
  5.                 if (params) {
  6.                     if (params.selector) {
  7.                         elem = params.selector;
  8.                     };
  9.                    
  10.                     if (params.margin) {
  11.                         margin = params.margin;
  12.                     };
  13.                 };
  14.                
  15.                 let options = {
  16.                     rootMargin: margin
  17.                 };
  18.                 shop2_gr.settings.imageObserver = new IntersectionObserver((entries, imgObserver) => {
  19.                     entries.forEach((entry) => {
  20.                         if (entry.isIntersecting) {
  21.                             const lazyImage = entry.target // Текущий элемент
  22.                            
  23.                             if (lazyImage.tagName == 'IMG') { // для обычных картинок
  24.                                 if (lazyImage.dataset.srcset) {
  25.                                     // Чтобы загружать картинки маленьких размеров с помощью srcset
  26.                                     lazyImage.srcset = lazyImage.dataset.srcset // Адрес картинки data-srcset=""
  27.                                     lazyImage.classList.remove(elem);
  28.                                     imgObserver.unobserve(lazyImage);
  29.                                 } else {
  30.                                     lazyImage.src = lazyImage.dataset.src // Адрес картинки data-src=""
  31.                                     lazyImage.classList.remove(elem);
  32.                                     imgObserver.unobserve(lazyImage);
  33.                                 }
  34.                             } else if (lazyImage.dataset.bg) {
  35.                                 if (window.innerWidth <= 768 && lazyImage.dataset.minbg) {
  36.                                     lazyImage.style.backgroundImage = 'url(' + lazyImage.dataset.minbg + ')';
  37.                                     lazyImage.classList.remove(elem);
  38.                                     imgObserver.unobserve(lazyImage);
  39.                                 } else {
  40.                                     lazyImage.style.backgroundImage = 'url(' + lazyImage.dataset.bg + ')';
  41.                                     lazyImage.classList.remove(elem);
  42.                                     imgObserver.unobserve(lazyImage);
  43.                                 }
  44.                             } else if (lazyImage.dataset.func) { // Если элемент содержит data-func
  45.                                 if (typeof shop2_gr.methods[lazyImage.dataset.func] == 'function') {
  46.                                     shop2_gr.methods[lazyImage.dataset.func](lazyImage); // Вызов функции
  47.                                     lazyImage.classList.remove(elem);
  48.                                     imgObserver.unobserve(lazyImage);
  49.                                 }
  50.                             } else {
  51.                                 lazyImage.classList.remove(elem);
  52.                                 imgObserver.unobserve(lazyImage);
  53.                             }
  54.                         }
  55.                     })
  56.                 }, options);
  57.    
  58.                 const arr = document.querySelectorAll('.' + elem);
  59.                
  60.                 arr.forEach((v) => {
  61.                     shop2_gr.settings.imageObserver.observe(v);
  62.                 });
  63.             },
Add Comment
Please, Sign In to add comment