PHP . SU
Программирование на PHP, MySQL и другие веб-технологии
Без описания
Поиск в теме | Версия для печати
leshiy
Отправлено: 16 Мая, 2019 - 15:23:30
Частый гость
Покинул форум
Сообщений всего: 188
Дата рег-ции: Июнь 2008
Помог: 0 раз(а)
На компе все работает, а вот на смартфоне почему то нет.
CODE (
javascript ):
скопировать код в буфер обмена
document.addEventListener ( "DOMContentLoaded" , function ( ) {
var lazyloadImages;
if ( "IntersectionObserver" in window) {
lazyloadImages = document.querySelectorAll ( ".lazy" ) ;
var imageObserver = new IntersectionObserver( function ( entries, observer) {
entries.forEach ( function ( entry) {
if ( entry.isIntersecting ) {
var image = entry.target ;
image.src = image.dataset .src ;
image.classList .remove ( "lazy" ) ;
imageObserver.unobserve ( image) ;
}
} ) ;
} ) ;
lazyloadImages.forEach ( function ( image) {
imageObserver.observe ( image) ;
} ) ;
} else {
var lazyloadThrottleTimeout;
lazyloadImages = document.querySelectorAll ( ".lazy" ) ;
function lazyload ( ) {
if ( lazyloadThrottleTimeout) {
clearTimeout( lazyloadThrottleTimeout) ;
}
lazyloadThrottleTimeout = setTimeout( function ( ) {
var scrollTop = window.pageYOffset ;
lazyloadImages.forEach ( function ( img) {
if ( img.offsetTop < ( window.innerHeight + scrollTop) ) {
img.src = img.dataset .src ;
img.classList .remove ( 'lazy' ) ;
}
} ) ;
if ( lazyloadImages.length == 0 ) {
document.removeEventListener ( "scroll" , lazyload) ;
window.removeEventListener ( "resize" , lazyload) ;
window.removeEventListener ( "orientationChange" , lazyload) ;
}
} , 20) ;
}
document.addEventListener ( "scroll" , lazyload) ;
window.addEventListener ( "resize" , lazyload) ;
window.addEventListener ( "orientationChange" , lazyload) ;
}
} )
<img class="lazy" data-src="/img.jpg">
Vladimir Kheifets
Отправлено: 17 Мая, 2019 - 07:26:45
Частый посетитель
Покинул форум
Сообщений всего: 879
Дата рег-ции: Март 2017
Откуда: Германия, Бавария
Помог: 37 раз(а)
leshiy пишет: На компе все работает, а вот на смартфоне почему то нет.
Доброе утро!
Чинить не пробовал, а только проверил так
https://www.alto-booking.com/demo/LazyImg.php
Спойлер (Отобразить ) CODE (
html ):
скопировать код в буфер обмена
<html >
<head >
<title > Lazy Img</ title >
<meta name = "viewport" content = "width=device-width,height=device-height,user-scalable=yes" >
<style >
img{margin-top:20px;width:100vw}
</ style >
<script type = "text/javascript" >
document.addEventListener("DOMContentLoaded", function() {
var lazyloadImages;
if ("IntersectionObserver" in window) {
lazyloadImages = document.querySelectorAll(".lazy");
var imageObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
var image = entry.target;
image.src = image.dataset.src;
image.classList.remove("lazy");
imageObserver.unobserve(image);
}
});
});
lazyloadImages.forEach(function(image) {
imageObserver.observe(image);
});
} else {
var lazyloadThrottleTimeout;
lazyloadImages = document.querySelectorAll(".lazy");
function lazyload () {
if(lazyloadThrottleTimeout) {
clearTimeout(lazyloadThrottleTimeout);
}
lazyloadThrottleTimeout = setTimeout(function() {
var scrollTop = window.pageYOffset;
lazyloadImages.forEach(function(img) {
if(img.offsetTop < ( window.innerHeight + scrollTop) ) {
img.src = img.dataset.src ;
img.classList.remove( 'lazy' ) ;
}
} ) ;
if( lazyloadImages.length == 0 ) {
document.removeEventListener( "scroll" , lazyload) ;
window.removeEventListener( "resize" , lazyload) ;
window.removeEventListener( "orientationChange" , lazyload) ;
}
} , 20) ;
}
document.addEventListener( "scroll" , lazyload) ;
window.addEventListener( "resize" , lazyload) ;
window.addEventListener( "orientationChange" , lazyload) ;
}
} )
</ script >
</ head >
<body >
<img class = "lazy" data-src = "img/ImgSlider/Koenigssee/DSC03726.JPG" >
<img class = "lazy" data-src = "img/ImgSlider/Koenigssee/DSC03727.JPG" >
<img class = "lazy" data-src = "img/ImgSlider/Koenigssee/DSC03728.JPG" >
<img class = "lazy" data-src = "img/ImgSlider/Koenigssee/DSC03741.JPG" >
<img class = "lazy" data-src = "img/ImgSlider/Koenigssee/DSC03751.JPG" >
<img class = "lazy" data-src = "img/ImgSlider/Koenigssee/DSC03758.JPG" >
<img class = "lazy" data-src = "img/ImgSlider/Koenigssee/DSC03762.JPG" >
<img class = "lazy" data-src = "img/ImgSlider/Koenigssee/DSC03763_2.jpg" >
<img class = "lazy" data-src = "img/ImgSlider/Koenigssee/DSC03785.JPG" >
<img class = "lazy" data-src = "img/ImgSlider/Koenigssee/DSC03797.JPG" >
<img class = "lazy" data-src = "img/ImgSlider/Koenigssee/DSC03802.JPG" >
<img class = "lazy" data-src = "img/ImgSlider/Koenigssee/DSC03824.JPG" >
<img class = "lazy" data-src = "img/ImgSlider/Koenigssee/DSC03825.JPG" >
<img class = "lazy" data-src = "img/ImgSlider/Koenigssee/DSC03826.JPG" >
<img class = "lazy" data-src = "img/ImgSlider/Koenigssee/DSC03834.JPG" >
<img class = "lazy" data-src = "img/ImgSlider/Koenigssee/DSC03837.JPG" >
<img class = "lazy" data-src = "img/ImgSlider/Koenigssee/DSC03839.JPG" >
<img class = "lazy" data-src = "img/ImgSlider/Koenigssee/DSC03840.JPG" >
<img class = "lazy" data-src = "img/ImgSlider/Koenigssee/DSC03841.JPG" >
<img class = "lazy" data-src = "img/ImgSlider/Koenigssee/DSC03845.JPG" >
<img class = "lazy" data-src = "img/ImgSlider/Koenigssee/DSC03855.JPG" >
<img class = "lazy" data-src = "img/ImgSlider/Koenigssee/DSC03869.JPG" >
<img class = "lazy" data-src = "img/ImgSlider/Koenigssee/DSC03870.JPG" >
<img class = "lazy" data-src = "img/ImgSlider/Koenigssee/DSC03871.JPG" >
<img class = "lazy" data-src = "img/ImgSlider/Koenigssee/DSC03872.JPG" >
<img class = "lazy" data-src = "img/ImgSlider/Koenigssee/DSC03890.JPG" >
<img class = "lazy" data-src = "img/ImgSlider/Koenigssee/DSC03893.JPG" >
<img class = "lazy" data-src = "img/ImgSlider/Koenigssee/DSC03897.JPG" >
</ body >
</ html >
На самом деле, на 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
Спойлер (Отобразить ) CODE (
html ):
скопировать код в буфер обмена
<html >
<head >
<title > Lazy Img Var.2</ title >
<meta name = "viewport" content = "width=device-width,height=device-height,user-scalable=yes" >
<style >
img{margin-top:20px;width:100vw}
</ style >
<script type = "text/javascript" >
// ID родительского элемента
var lazy_parent_id='gallery';
function lazy_load_proc() {
var doc = document.documentElement;
var body = document.body;
// Получить размеры видимой области страницы (кроссбраузерно)
if (typeof(window.innerWidth) == 'number') {
my_width = window.innerWidth;
my_height = window.innerHeight;
}
else if (doc && (doc.clientWidth || doc.clientHeight)) {
my_width = doc.clientWidth;
my_height = doc.clientHeight;
}
else if (body && (body.clientWidth || body.clientHeight)) {
my_width = body.clientWidth;
my_height = body.clientHeight;
}
// Получить смещение страницы относительно ее верха
if (doc.scrollTop) { dy=doc.scrollTop; } else { dy=body.scrollTop; }
// Обработка всех картинок в контейнере
var container=document.getElementById(lazy_parent_id);
if (container) {
var im=container.getElementsByTagName('img');
for (var i=0; i<im.length; i++) {
var el= im[ i] ;
var ds= el.getAttribute( 'data-src' ) ; // Если атрибут lazy есть, то обработать картинку
if ( ds) {
// Получить координаты картинки от верха страницы
var coord= lazy_get_position( el) ;
// Если картинка попала в видимую область, то показать ее.
// Плюс берется запас в 100 пикселов для более плавной подгрузки
if ( coord.y> (dy-my_height-100) && coord.y<(dy+my_height+100)) {
el.setAttribute('src',ds); // Прописать адрес исходной картинки и убрать атрибут lazy
el.lazy='';
}
}
}
}
}
// Вспомогательная функция для определения координат элемента
function lazy_get_position(element) {
var offsetLeft=0;
var offsetTop=0;
do {
offsetLeft+=element.offsetLeft;
offsetTop+=element.offsetTop;
}
while (element=element.offsetParent);
return {x:offsetLeft, y:offsetTop};
}
</ script >
</ head >
<body >
<div id = "gallery" >
<img data-src = "img/ImgSlider/Koenigssee/DSC03726.JPG" >
<img data-src = "img/ImgSlider/Koenigssee/DSC03727.JPG" >
<img data-src = "img/ImgSlider/Koenigssee/DSC03728.JPG" >
<img data-src = "img/ImgSlider/Koenigssee/DSC03741.JPG" >
<img data-src = "img/ImgSlider/Koenigssee/DSC03751.JPG" >
<img data-src = "img/ImgSlider/Koenigssee/DSC03758.JPG" >
<img data-src = "img/ImgSlider/Koenigssee/DSC03762.JPG" >
<img data-src = "img/ImgSlider/Koenigssee/DSC03763_2.jpg" >
<img data-src = "img/ImgSlider/Koenigssee/DSC03785.JPG" >
<img data-src = "img/ImgSlider/Koenigssee/DSC03797.JPG" >
<img data-src = "img/ImgSlider/Koenigssee/DSC03802.JPG" >
<img data-src = "img/ImgSlider/Koenigssee/DSC03824.JPG" >
<img data-src = "img/ImgSlider/Koenigssee/DSC03825.JPG" >
<img data-src = "img/ImgSlider/Koenigssee/DSC03826.JPG" >
<img data-src = "img/ImgSlider/Koenigssee/DSC03834.JPG" >
<img data-src = "img/ImgSlider/Koenigssee/DSC03837.JPG" >
<img data-src = "img/ImgSlider/Koenigssee/DSC03839.JPG" >
<img data-src = "img/ImgSlider/Koenigssee/DSC03840.JPG" >
<img data-src = "img/ImgSlider/Koenigssee/DSC03841.JPG" >
<img data-src = "img/ImgSlider/Koenigssee/DSC03845.JPG" >
<img data-src = "img/ImgSlider/Koenigssee/DSC03855.JPG" >
<img data-src = "img/ImgSlider/Koenigssee/DSC03869.JPG" >
<img data-src = "img/ImgSlider/Koenigssee/DSC03870.JPG" >
<img data-src = "img/ImgSlider/Koenigssee/DSC03871.JPG" >
<img data-src = "img/ImgSlider/Koenigssee/DSC03872.JPG" >
<img data-src = "img/ImgSlider/Koenigssee/DSC03890.JPG" >
<img data-src = "img/ImgSlider/Koenigssee/DSC03893.JPG" >
<img data-src = "img/ImgSlider/Koenigssee/DSC03897.JPG" >
</ div >
<script type = "text/javascript" >
window.onscroll = lazy_load_proc;
window.onresize = lazy_load_proc;
lazy_load_proc(); // Сразу же показать картинки в видимой области
</ script >
</ body >
</ html >
на Андроиде выводит в стандарном браузере, Edge, Chrome, Opera,Firefox
В Firefox хуже чем в других браузерах, но лучше чем в Вашем скрипте.
Приложил QR для тестирования этого примераПрикреплено изображение (Нажмите для увеличения) (Отредактировано автором: 17 Мая, 2019 - 08:51:41)
leshiy
Отправлено: 17 Мая, 2019 - 11:56:03
Частый гость
Покинул форум
Сообщений всего: 188
Дата рег-ции: Июнь 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 ):
скопировать код в буфер обмена
( 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) } ) } } ) ;
var bLazy = new Blazy( {
breakpoints: [ {
src: 'data-src-mobile'
} ]
} ) ;
Поиск в теме | Версия для печати
Страниц (1): [1]
Сейчас эту тему просматривают: 0 (гостей: 0, зарегистрированных: 0)
« Если скрипт не работает »
Все гости форума могут просматривать этот раздел. Только зарегистрированные пользователи могут создавать новые темы в этом разделе. Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.
Powered by ExBB FM 1.0 RC1. InvisionExBB