PHP.SU

Программирование на PHP, MySQL и другие веб-технологии
PHP.SU Портал     На главную страницу форума Главная     Помощь Помощь     Поиск Поиск     Поиск Яндекс Поиск Яндекс     Вакансии  Пользователи Пользователи


 Страниц (1): [1]   

> Без описания
leshiy
Отправлено: 16 Мая, 2019 - 15:23:30
Post Id


Частый гость


Покинул форум
Сообщений всего: 169
Дата рег-ции: Июнь 2008  


Помог: 0 раз(а)




На компе все работает, а вот на смартфоне почему то нет.
CODE (javascript):
скопировать код в буфер обмена
  1. document.addEventListener("DOMContentLoaded", function() {
  2.   var lazyloadImages;    
  3.  
  4.   if ("IntersectionObserver" in window) {
  5.     lazyloadImages = document.querySelectorAll(".lazy");
  6.     var imageObserver = new IntersectionObserver(function(entries, observer) {
  7.       entries.forEach(function(entry) {
  8.         if (entry.isIntersecting) {
  9.           var image = entry.target;
  10.           image.src = image.dataset.src;
  11.           image.classList.remove("lazy");
  12.           imageObserver.unobserve(image);
  13.         }
  14.       });
  15.     });
  16.  
  17.     lazyloadImages.forEach(function(image) {
  18.       imageObserver.observe(image);
  19.     });
  20.   } else {  
  21.     var lazyloadThrottleTimeout;
  22.     lazyloadImages = document.querySelectorAll(".lazy");
  23.    
  24.     function lazyload () {
  25.       if(lazyloadThrottleTimeout) {
  26.         clearTimeout(lazyloadThrottleTimeout);
  27.       }    
  28.  
  29.       lazyloadThrottleTimeout = setTimeout(function() {
  30.         var scrollTop = window.pageYOffset;
  31.         lazyloadImages.forEach(function(img) {
  32.             if(img.offsetTop < (window.innerHeight + scrollTop)) {
  33.               img.src = img.dataset.src;
  34.               img.classList.remove('lazy');
  35.             }
  36.         });
  37.         if(lazyloadImages.length == 0) {
  38.           document.removeEventListener("scroll", lazyload);
  39.           window.removeEventListener("resize", lazyload);
  40.           window.removeEventListener("orientationChange", lazyload);
  41.         }
  42.       }, 20);
  43.     }
  44.  
  45.     document.addEventListener("scroll", lazyload);
  46.     window.addEventListener("resize", lazyload);
  47.     window.addEventListener("orientationChange", lazyload);
  48.   }
  49. })
  50.  

<img class="lazy" data-src="/img.jpg">
 
 Top
Vladimir Kheifets
Отправлено: 17 Мая, 2019 - 07:26:45
Post Id



Посетитель


Покинул форум
Сообщений всего: 434
Дата рег-ции: Март 2017  
Откуда: Германия, Бавария


Помог: 22 раз(а)




leshiy пишет:
На компе все работает, а вот на смартфоне почему то нет.

Доброе утро!
Чинить не пробовал, а только проверил так
https://www.alto-booking.com/demo/LazyImg.php
Спойлер (Отобразить)
На самом деле, на PC не на всех бузерах работает, на пример, не работает на Safari.
Проверил на Андроиде. Ничего не выводит в стандарном браузере.
Нормально работает на браузрах: Edge, Chrome, Opera
Выводит, но плохо в Firefox - одновременно разворачивает все картинки.
Приложил QR для тестирования. В Edge QR-сканер встроен.
Может быть ещё кто-то посмотрит на других смартфонах.
Удачи!

(Добавление)
есть другое решение с https://htmlweb[dot]ru/java/example/lazy_load.php
Проверил так
https://www[dot]alto-booking[dot]com/demo/LazyImg2.php
Спойлер (Отобразить)
на Андроиде выводит в стандарном браузере, Edge, Chrome, Opera,Firefox
В Firefox хуже чем в других браузерах, но лучше чем в Вашем скрипте.
Приложил QR для тестирования этого примера
Прикреплено изображение (Нажмите для увеличения)
Untitled-1.gif

(Отредактировано автором: 17 Мая, 2019 - 08:51:41)

 
 Top
LIME
Отправлено: 17 Мая, 2019 - 10:50:45
Post Id



Активный участник


Покинул форум
Сообщений всего: 10423
Дата рег-ции: Нояб. 2010  


Помог: 309 раз(а)




leshiy может тебе это? http://imakewebthings[dot]com/waypoints/


-----
DDD
 
 Top
leshiy
Отправлено: 17 Мая, 2019 - 11:56:03
Post Id


Частый гость


Покинул форум
Сообщений всего: 169
Дата рег-ции: Июнь 2008  


Помог: 0 раз(а)




Вариант https://htmlweb[dot]ru/java/example/lazy_load.php не подходит т.к. картинки начинают открываться только после начала скролинга.
Вариант https://www[dot]alto-booking[dot]com/demo/LazyImg2.php почему то не работает, проверял на https://www[dot]bing[dot]com/webmaster/t[dot][dot][dot]ile-friendliness

Нашел вроде бы работающий скрипт но он довольно долго открывает картинки при скролинге.
CODE (javascript):
скопировать код в буфер обмена
  1.   (function(q,m){"function"===typeof define&&define.amd?define(m):"object"===typeof exports?module.exports=m():q.Blazy=m()})(this,function(){function q(b){var c=b._util;c.elements=E(b.options);c.count=c.elements.length;c.destroyed&&(c.destroyed=!1,b.options.container&&l(b.options.container,function(a){n(a,"scroll",c.validateT)}),n(window,"resize",c.saveViewportOffsetT),n(window,"resize",c.validateT),n(window,"scroll",c.validateT));m(b)}function m(b){for(var c=b._util,a=0;a<c.count;a++){var d=c.elements[a],e;a:{var g=d;e=b.options;var p=g.getBoundingClientRect();if(e.container&&y&&(g=g.closest(e.containerClass))){g=g.getBoundingClientRect();e=r(g,f)?r(p,{top:g.top-e.offset,right:g.right+e.offset,bottom:g.bottom+e.offset,left:g.left-e.offset}):!1;break a}e=r(p,f)}if(e||t(d,b.options.successClass))b.load(d),c.elements.splice(a,1),c.count--,a--}0===c.count&&b.destroy()}function r(b,c){return b.right>=c.left&&b.bottom>=c.top&&b.left<=c.right&&b.top<=c.bottom}function z(b,c,a){if(!t(b,a.successClass)&&(c||a.loadInvisible||0<b.offsetWidth&&0<b.offsetHeight))if(c=b.getAttribute(u)||b.getAttribute(a.src)){c=c.split(a.separator);var d=c[A&&1<c.length?1:0],e=b.getAttribute(a.srcset),g="img"===b.nodeName.toLowerCase(),p=(c=b.parentNode)&&"picture"===c.nodeName.toLowerCase();if(g||void 0===b.src){var h=new Image,w=function(){a.error&&a.error(b,"invalid");v(b,a.errorClass);k(h,"error",w);k(h,"load",f)},f=function(){g?p||B(b,d,e):b.style.backgroundImage='url("'+d+'")';x(b,a);k(h,"load",f);k(h,"error",w)};p&&(h=b,l(c.getElementsByTagName("source"),function(b){var c=a.srcset,e=b.getAttribute(c);e&&(b.setAttribute("srcset",e),b.removeAttribute(c))}));n(h,"error",w);n(h,"load",f);B(h,d,e)}else b.src=d,x(b,a)}else"video"===b.nodeName.toLowerCase()?(l(b.getElementsByTagName("source"),function(b){var c=a.src,e=b.getAttribute(c);e&&(b.setAttribute("src",e),b.removeAttribute(c))}),b.load(),x(b,a)):(a.error&&a.error(b,"missing"),v(b,a.errorClass))}function x(b,c){v(b,c.successClass);c.success&&c.success(b);b.removeAttribute(c.src);b.removeAttribute(c.srcset);l(c.breakpoints,function(a){b.removeAttribute(a.src)})}function B(b,c,a){a&&b.setAttribute("srcset",a);b.src=c}function t(b,c){return-1!==(" "+b.className+" ").indexOf(" "+c+" ")}function v(b,c){t(b,c)||(b.className+=" "+c)}function E(b){var c=[];b=b.root.querySelectorAll(b.selector);for(var a=b.length;a--;c.unshift(b[a]));return c}function C(b){f.bottom=(window.innerHeight||document.documentElement.clientHeight)+b;f.right=(window.innerWidth||document.documentElement.clientWidth)+b}function n(b,c,a){b.attachEvent?b.attachEvent&&b.attachEvent("on"+c,a):b.addEventListener(c,a,{capture:!1,passive:!0})}function k(b,c,a){b.detachEvent?b.detachEvent&&b.detachEvent("on"+c,a):b.removeEventListener(c,a,{capture:!1,passive:!0})}function l(b,c){if(b&&c)for(var a=b.length,d=0;d<a&&!1!==c(b[d],d);d++);}function D(b,c,a){var d=0;return function(){var e=+new Date;e-d<c||(d=e,b.apply(a,arguments))}}var u,f,A,y;return function(b){if(!document.querySelectorAll){var c=document.createStyleSheet();document.querySelectorAll=function(a,b,d,h,f){f=document.all;b=[];a=a.replace(/\[for\b/gi,"[htmlFor").split(",");for(d=a.length;d--;){c.addRule(a[d],"k:v");for(h=f.length;h--;)f[h].currentStyle.k&&b.push(f[h]);c.removeRule(0)}return b}}var a=this,d=a._util={};d.elements=[];d.destroyed=!0;a.options=b||{};a.options.error=a.options.error||!1;a.options.offset=a.options.offset||100;a.options.root=a.options.root||document;a.options.success=a.options.success||!1;a.options.selector=a.options.selector||".b-l";a.options.separator=a.options.separator||"|";a.options.containerClass=a.options.container;a.options.container=a.options.containerClass?document.querySelectorAll(a.options.containerClass):!1;a.options.errorClass=a.options.errorClass||"b-error";a.options.breakpoints=a.options.breakpoints||!1;a.options.loadInvisible=a.options.loadInvisible||!1;a.options.successClass=a.options.successClass||"b-loaded";a.options.validateDelay=a.options.validateDelay||25;a.options.saveViewportOffsetDelay=a.options.saveViewportOffsetDelay||50;a.options.srcset=a.options.srcset||"data-srcset";a.options.src=u=a.options.src||"data-src";y=Element.prototype.closest;A=1<window.devicePixelRatio;f={};f.top=0-a.options.offset;f.left=0-a.options.offset;a.revalidate=function(){q(a)};a.load=function(a,b){var c=this.options;void 0===a.length?z(a,b,c):l(a,function(a){z(a,b,c)})};a.destroy=function(){var a=this._util;this.options.container&&l(this.options.container,function(b){k(b,"scroll",a.validateT)});k(window,"scroll",a.validateT);k(window,"resize",a.validateT);k(window,"resize",a.saveViewportOffsetT);a.count=0;a.elements.length=0;a.destroyed=!0};d.validateT=D(function(){m(a)},a.options.validateDelay,a);d.saveViewportOffsetT=D(function(){C(a.options.offset)},a.options.saveViewportOffsetDelay,a);C(a.options.offset);l(a.options.breakpoints,function(a){if(a.width>=window.screen.width)return u=a.src,!1});setTimeout(function(){q(a)})}});
  2.  
  3.  
  4. var bLazy = new Blazy({
  5.     breakpoints: [{
  6.             src: 'data-src-mobile'
  7.         }]
  8. });
  9.  
 
 Top
Vladimir Kheifets
Отправлено: 17 Мая, 2019 - 13:23:54
Post Id



Посетитель


Покинул форум
Сообщений всего: 434
Дата рег-ции: Март 2017  
Откуда: Германия, Бавария


Помог: 22 раз(а)




leshiy пишет:
Вариант https://www[dot]alto-booking[dot]com/demo/LazyImg2.php почему то не работает
Попробуйте просто отсканировать второй QR- код на смартфоне.

(Отредактировано автором: 17 Мая, 2019 - 13:24:29)

 
 Top
Страниц (1): [1]
Сейчас эту тему просматривают: 1 (гостей: 1, зарегистрированных: 0)
« Если скрипт не работает »


Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.
 



Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB