Ответы пользователя по тегу JavaScript
  • Как подгрузить сначала Критический CSS?

    @Otrivin
    junior full-stack сисадмин
    Делаю так:
    1) в devtools включаю override для сайта
    2) прохожу типичные страницы, удаляя с помощью js элементы ниже первого экрана + доп отступа
    3) сохраняю результирующий html как override
    4) анализирую страницу с помощью coverage, экспортирую отчёт по ней. Попутно меняю разрешение до мобильной версии и обратно, чтобы стриггерить медиа-правила.
    5) когда все типичные страницы пройдены, и собраны отчёты по каждой из них, анализирую папку с ними скриптом, объединяющий использованные правила в один файл, неиспользуемые - в другой. Сохраняя исходную структуру/количество css.
    6) создаю critical.css, который можно пушить по http2 либо просто добавив link preload, а остальные исходные css проекта заменяю очищенными экземплярами, чтобы не дублировать правила и в исходнике, и в критическом.
    7) загрузку исходных откладываю с помощью js, loadcss, к примеру

    Первые 3 шага рисковые, их можно пропустить, но с ними критический стиль получается меньшего размера, т.к. coverage записывает стили всех элементов, находящихся на странице.
    Ответ написан
    Комментировать
  • Как узнать процент на сколько загрузилась страница и присвоить это значение переменной?

    @Otrivin
    junior full-stack сисадмин
    На бэке рассчитать вес каждого подключаемого ресурса в gz, передать в data-атрибут (хоть в байтах, хоть в процентах); на фронте обойти все эти ресурсы, рассчитывая общий вес, затем вешать слушателя на onload каждого из них и считать. Переменную можно использовать глобальную, window['awesomeCounter']

    Для оптимизации использовать кэш + прописать атрибут заранее, если ресурсы статические
    Ответ написан
    Комментировать
  • Как разбить слитно написанные фразы на отдельные слова?

    @Otrivin
    junior full-stack сисадмин
    У Яндекса есть спеллер. На гитхабе есть классы для работы с ним.
    Попробуйте, может помочь
    Ответ написан
    1 комментарий
  • Как устранить блокирование основного потока скриптом Яндекс.Карт?

    @Otrivin
    junior full-stack сисадмин
    Отложите загрузку карт + перенесите тег
    Ответ написан
    2 комментария
  • Когда пишут: (function() { //somecode })() - это зачем так делают - функцию в скобочки?

    @Otrivin
    junior full-stack сисадмин
    Чтобы не засорять глобальное пространство имён, например
    Ответ написан
    Комментировать
  • Как подключить JSON файл с кешированием для передачи данных в JS?

    @Otrivin
    junior full-stack сисадмин
    Можно попробовать хранить в localStorage; если в нем не сохранен - подтягивать с сервера
    Ответ написан
    Комментировать
  • Как сделать прелоадер для ожидания пока загрузятся скрипты в head?

    @Otrivin
    junior full-stack сисадмин
    Инлайново CSS анимации прелоадера; последним скриптом выполнять функцию скрытия прелоадера
    Ответ написан
    Комментировать
  • Изучение фронтэнда/JS?

    @Otrivin
    junior full-stack сисадмин
    Ну по js, замыканиям, контексту и прочим базовым вещам Лаврик неплохо объясняет, видеокурсы гуглятся. В каких-то моментах, конечно, хотелось бы поподробнее, но для базы - сойдёт.
    Ответ написан
    Комментировать
  • Есть ли подобные слайдеры как у гугла и яндекса?

    @Otrivin
    junior full-stack сисадмин
    Любой. Я бы советовал Tiny slider - лёгкий и без зависимости от jq
    Ответ написан
    Комментировать
  • Как отправить json-данные, получить объект и разобрать его?

    @Otrivin Автор вопроса
    junior full-stack сисадмин
    Смог. Может, кому-то пригодится.
    (function($) {
        $(document).ready(function(){
        	console.log("Попытка отправить");
            var text = "Првет мир! Форма обратной вязи";
            var senddata = { text : text}; // Т.к. передавать надо объект с параметром text
            $.ajax({
                url: 'https://speller.yandex.net/services/spellservice.json/checkText',
                type: 'POST',
                data: senddata,
                success: function(datar) {
                    console.dir(datar); // Выводим ответ, в ответе должен передаваться js-объект
                }
            });
        });
    })(jQuery);
    Ответ написан
    Комментировать
  • Как 1) перехватить обработчик submit у плагина, 2) запустить свою функцию и 3) вернуть управление плагину?

    @Otrivin
    junior full-stack сисадмин
    Если ловить на фронтенде, то подключайся к незанятому событию - "focus()"; сработает для десктопа, но не мобил. К событию submit не всегда можно прицепиться - нужно, чтобы твой скрипт отработал раньше "родного" скрипта формы, у меня с Drupal так и не вышло.

    Я бы рекомендовал цепляться со стороны бекэнда - сначала поищи хуки на отправку для этого плагина, если тухло - перехватывай $_POST и тырь данные оттуда, а потом можно эти данные постить далее либо в плагин, либо в свой обработчик.
    Ответ написан
    Комментировать
  • Как менять текст на картинке в зависимости от выбранной услуги?

    @Otrivin
    junior full-stack сисадмин
    Js здесь вообще ни при чем. На почту ты не отправишь скрипт - максимум сверстанное письмо в html.

    Создай шаблон на php, получай на сервере переменные из заказа, подставляй в целевые поля данные и шли функцией mail();
    Ответ написан
    Комментировать
  • Как реализовать большие изображения с отложенной загрузкой?

    @Otrivin
    junior full-stack сисадмин
    1) на CSS похожий эффект делается с помощью background-image; должен сказать, что фоновые картинки поисковиком, вроде как, не индексируются.
    2) на is/jQuery есть куча плагинов, но все они замещают тег IMG, что может плохо сказаться на поисковой оптимизации изображений. Особенно обидно, если они - оригинальные.
    Ответ написан
  • Как сделать навигацию с tab-ами?

    @Otrivin
    junior full-stack сисадмин
    Самостоятельно, примеры есть в инете. Поищи по "вкладки на js". Вообще ничего сложного - два дивана, один с кнопками, другой с содержимым. При нажатии на вкладку соответствующему блоку с содержимым добавляется класс, отображающий его
    Ответ написан
    1 комментарий
  • Как закрыть Lightbox по клику на кнопку “Назад”?

    @Otrivin
    junior full-stack сисадмин
    Попробуйте таким скриптом. На уход с сайта можно навесить обработчик (если не ошибаюсь, на мобильных он тоже работает). Примеры - сайты с азино/рекламные.
    Готовый код предоставить не готов, с телефона.

    Детектим мобильное устройство. Если мобила, навешиваем событие на уход с сайта. Если по его происшествию открыто модальное окно лайтбокса - e.preventdefault и триггерим закрытие лайтбокса.
    Ответ написан
    Комментировать
  • Как называется плагин типа нейронных сетей?

    @Otrivin
    junior full-stack сисадмин
    Particles.js ?
    Ответ написан
    Комментировать
  • Как загрузить картинку без JS?

    @Otrivin
    junior full-stack сисадмин
    Можно загрузить заранее в блок, кнопку сделать контейнером для блока с картинкой. Блоку задать максимальную высоту в 0, а для "контейнер:hover > блок" ставить максимальную высоту over 9000. Затем сдобрить это переходами и transition-delay в over9000.

    По нажатию на кнопку стиль вложенного блока с картинкой меняется с нулевой высоты до нормальной, а transition-delay удерживает высоту даже после смены фокуса с кнопки на другой элемент.
    Ответ написан
    Комментировать
  • Как применить один обработчик событий к множеству элементов, для индивидуальной обработки, не раздувая / дублируя код?

    @Otrivin
    junior full-stack сисадмин
    Изи. Добавь к каждому элементу класс, который будет служить маркером, в скрипте указывай его.

    Ну типа
    <div class="bface-slide-1 marker-class">
    
    $("body").on('click','.marker-class',function () {
    Ответ написан
  • Проблема с перемещением по странице в мобильной версии при использовании плагина горизонтального скроллбари?

    @Otrivin
    junior full-stack сисадмин
    Можно попробовать сделать контейнер с max-width: 100% и overflow: auto.

    А можно попробовать, как я недавно: адаптировал сайт под мобильники, на сайте был слайдер, который при традиционной подгонке стилями некорректно начинал работать.

    Почесав репу, я сел да и состряпал решение на основе css-свойства "transform: scale" и jquery. JQuery используется для удаления пустой области, размером с оригинальный элемент, после применения масштабирования.

    Идея такова: делаем контейнер целевому элементу, затем устанавливаем элементу масштабирование с установкой точки отсчета в верхнем левом углу; после этого jquery вычисляем получившийся реальный размер масштабируемого элемента и устанавливаем высоту и ширину контейнеру, согласно рассчетам.
    Опционально можно добавить overflow: hidden контейнеру.

    Применено на czm-sochi.su

    Дано: неадаптивный слайдер с анимацией.
    Надо: сделать так, чтобы он адаптировался под размер экрана.
    Решение: масштабировать через css со scale, обрезать пустоту вокруг через вычисление реального размера и придания их обёрткам.
    
    Внимание: используется стоп-кран, проверяющий, применено ли свойство transform: scale к элементу. Проверяется по маске "*.**", т.е. в CSS надо указывать трансформацию с сотой долей. 
    	
    	<script>
    		//нам нужно отцентрировать слайдер главной по горизонтали. Он имеет margin auto, но из-за scale вложенного содержимого не центрируется.
    		//Будем явно указывать обёртке высоту и ширину, тогда margin сработает.
    		
    		//выберем элемент, у кого будем брать высоту и ширину с margin'ами
    		var sourceElem = '#nextend-smart-slider-135';
    		//Выбор элемента, в котором будем ставить высоту (это вложенный в секцию див)
    		var targetElemHei = 'section#top-a>div';
    		//Выбор элемента, в котором ставим уже ширину (это секция и обёртка)
    		var targetElemWid = 'section#top-a';
    		//глобальная переменная, определяет отработал скрипт или нет
    		var worked = false;
    		
    		//стартуем!
    		jQuery(document).ready(startParams);
    		//на ресайз вешаем обработку, в которой проверяем переменную worked.
    		jQuery(window).on('resize',startParams);
    		
    		function startParams(){
    			//выполняемся, если исходный элемент для забора данных существует
    			//а еще стоп-кран, если transform не применяется к слайдеру, ничего не трогаем.
    			if (jQuery(sourceElem).length != 0 && (jQuery(sourceElem).css('transform').match(/[0-9].[0-9][0-9]/) != null && jQuery(sourceElem).css('transform').match(/[0-9].[0-9][0-9]/) != 0.00)) {
    				//устанавливаем переменные высоты, ширины, масштабирования
    				var elemHei = jQuery(sourceElem).height();
    				var elemWid = jQuery(sourceElem).width();
    				var scaleMultiplier = jQuery(sourceElem).css('transform').match(/[0-9].[0-9][0-9]/);
    				jQuery(targetElemHei).height(elemHei*scaleMultiplier+47);
    				jQuery(targetElemWid).width(elemWid*scaleMultiplier+14);
    				worked = true;
    			} else if (worked == true){
    				if (jQuery(sourceElem).css('transform').match(/[0-9].[0-9][0-9]/) == null || jQuery(sourceElem).css('transform').match(/[0-9].[0-9][0-9]/) == 0.00){
    					jQuery(targetElemHei).attr('style', '');
    					jQuery(targetElemWid).attr('style', '');
    				}
    			}
    			
    		}
    	</script>
    Ответ написан
  • Как скрыть начальные действия, выполняемые JS по отношению к странице?

    @Otrivin
    junior full-stack сисадмин
    Расставь z-index, потом скриптом их меняй
    Ответ написан
    Комментировать