Advertisement
Igor150195

lazy

Apr 6th, 2021
964
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 defaultMargin = '10px';
  4.             var initMargin = '500px';
  5.            
  6.             if (params) {
  7.                 if (params.selector) {
  8.                     elem = params.selector;
  9.                 };
  10.                
  11.                 if (params.margin) {
  12.                     defaultMargin = params.margin; 
  13.                 };
  14.                
  15.                 if (params.initMargin) {
  16.                     initMargin = params.initMargin;
  17.                 };
  18.             };
  19.            
  20.             var rootMarginVal = defaultMargin;
  21.            
  22.             /*if (shop2.mode == 'main') {
  23.                 if (readCookie('rootMarginCookie')) {
  24.                     var rootMarginVal = initMargin;
  25.    
  26.                 } else {
  27.                     var rootMarginVal = defaultMargin;
  28.                 }
  29.                 createCookie('rootMarginCookie', 1, 1);
  30.             };*/
  31.    
  32.             let options = {
  33.                 rootMargin: rootMarginVal
  34.             };
  35.             shop2_gr.settings.imageObserver = new IntersectionObserver((entries, imgObserver) => {
  36.                 entries.forEach((entry) => {
  37.                     if (entry.isIntersecting) {
  38.                         const lazyImage = entry.target // Текущий элемент
  39.    
  40.                         if (lazyImage.tagName == 'IMG') { // для обычных картинок
  41.                             if (lazyImage.dataset.srcset) {
  42.                                 // Чтобы загружать картинки маленьких размеров с помощью srcset
  43.                                 lazyImage.srcset = lazyImage.dataset.srcset // Адрес картинки data-srcset=""
  44.                                 lazyImage.classList.remove(elem);
  45.                                 imgObserver.unobserve(lazyImage);
  46.                             } else {
  47.                                 lazyImage.src = lazyImage.dataset.src // Адрес картинки data-src=""
  48.                                 lazyImage.classList.remove(elem);
  49.                                 imgObserver.unobserve(lazyImage);
  50.                             }
  51.                         } else if (lazyImage.dataset.bg) {
  52.                             if (window.innerWidth <= 768 && lazyImage.dataset.minbg) {
  53.                                 lazyImage.style.backgroundImage = 'url(' + lazyImage.dataset.minbg + ')';
  54.                                 lazyImage.classList.remove(elem);
  55.                                 imgObserver.unobserve(lazyImage);
  56.                             } else {
  57.                                 lazyImage.style.backgroundImage = 'url(' + lazyImage.dataset.bg + ')';
  58.                                 lazyImage.classList.remove(elem);
  59.                                 imgObserver.unobserve(lazyImage);
  60.                             }
  61.                         } else if (lazyImage.dataset.func) { // Если элемент содержит data-func
  62.                             if (typeof shop2_gr.methods[lazyImage.dataset.func] == 'function') {
  63.                                 shop2_gr.methods[lazyImage.dataset.func](lazyImage); // Вызов функции
  64.                                 lazyImage.classList.remove(elem);
  65.                                 imgObserver.unobserve(lazyImage);
  66.                             }
  67.                         } else {
  68.                             lazyImage.classList.remove(elem);
  69.                             imgObserver.unobserve(lazyImage);
  70.                         }
  71.                     }
  72.                 })
  73.             }, options);
  74.  
  75.             const arr = document.querySelectorAll('.' + elem);
  76.            
  77.             arr.forEach((v) => {
  78.                 shop2_gr.settings.imageObserver.observe(v);
  79.             });
  80.         },
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement