Загрузка изображений с использованием jquery + ajax + laravel

Пример. Google suggest.

Google — одна из первых систем, которая предложила «живой поиск», live search. Пользователь печатает поисковую фразу, а система автодополняет ее, получая
список самых вероятных дополнений с сервера.

Код, который это обеспечивает, работает следующим образом.

• Активируется примерно при каждом нажатии клавиши
  • Время посылки последнего запроса отслеживается
  • Для «обычной» скорости печати — запрос отсылается при каждом нажатии
  • Для «программистской» скорости — каждые несколько нажатий
• Создается скрытый DIV, который показывается при начале печати
• DIV заполняется ответом сервера
  • Текущий результат подсвечен, можно перемещаться и выбирать
  • При нажатии правой стрелки, поиск в подрезультатах
• Результаты кэшируются
• Время на осуществление запроса отслеживается для управления частотой запросов к серверу
  • Обычный модем будет обращаться к серверу меньше,
  • Подключение по выделенной линии — запросы идут чаще.

10 ответов

Лучший ответ

Конечно, вы можете показать его перед выполнением запроса и скрыть после его завершения:

Я обычно предпочитаю более общее решение связать его с глобальными событиями ajaxStart и ajaxStop, чтобы оно отображалось для всех событий ajax:

249

Zack Bloom
13 Янв 2011 в 20:14

-1

Narendra Reddy
12 Янв 2019 в 13:05

HTML-код:

Может кто-нибудь объяснить, почему это не работает?

Код JQUERY:

20

sumityadavbadli
30 Ноя 2016 в 07:30

Я думаю, что это может быть лучше, если у вас есть тонны вызовов $ .ajax

ПРИМЕЧАНИЕ.

Если вы используете CSS. Элемент, который вы хотите показать, когда ajax извлекает данные из вашего внутреннего кода, должен быть таким.

4

The Terrible Child
18 Апр 2018 в 04:12

Вы можете добавить ajax start и complete, это работает, когда вы нажимаете на событие кнопки.

Roshan Vishwakarma
8 Дек 2018 в 04:54

Перед вашим вызовом либо вставьте загрузочное изображение в div / span, а затем в функции успеха удалите это изображение. В качестве альтернативы вы можете настроить класс CSS, например загрузка, которая может выглядеть следующим образом

А затем назначьте этот класс span / div и очистите его в функции успеха

1

Vadim
13 Янв 2011 в 20:13

«Изображение», которое люди обычно показывают во время вызова AJAX, представляет собой анимированный GIF. Поскольку невозможно определить процент выполнения запроса ajax, используемые анимированные картинки представляют собой неопределенные счетчики. Это просто изображение, повторяющееся снова и снова, как шарик из кругов разных размеров. http://ajaxload.info/. Хороший сайт для создания собственного настраиваемого блесна.

8

jEremyB
13 Янв 2011 в 21:19

Используйте beforeSend объекта ajax и завершите функции. Лучше показать gif изнутри beforeSend, чтобы все поведение было заключено в один объект. Будьте осторожны, скрывая гифку с помощью функции успеха. Если запрос не выполнен, вы, вероятно, все равно захотите скрыть GIF. Для этого используйте функцию Complete. Это будет выглядеть так:

58

jEremyB
13 Янв 2011 в 21:06

Это позволяет блокировать определенные элементы страницы или всю страницу во время выполнения запроса ajax.

3

matt
13 Янв 2011 в 20:15

Что-то вроде этого:

Andy
13 Янв 2011 в 20:12

Использование вспомогательных методов для работы с конкретными типами данных

Библиотека jQuery предоставляет три вспомогательных метода, которые делают работу с некоторыми типами данных более удобной. Некоторые из них мы рассмотрим далее.

Получение HTML-фрагментов

Метод load() предназначен для получения только HTML-данных, что позволяет совместить запрос HTML-фрагмента, обработку ответа от сервера для создания набора элементов и вставку этих элементов в документ в одном действии. Пример использования метода load() представлен ниже:

В этом сценарии мы вызываем метод load() для элемента, в который хотим вставить новые элементы, и передаем ему URL-адрес в качестве аргумента. Если запрос завершается успешно, а полученный от сервера ответ содержит действительный HTML-фрагмент, элементы вставляются в указанное место в документе, как показано на рисунке:

Вы видите, что все элементы из файла flowers.html добавлены в документ, как мы и хотели, но поскольку у них отсутствует атрибут class, то они не укладываются в табличную компоновку страницы, используемую в основном документе. Поэтому метод load() наиболее полезен в тех случаях, когда все элементы могут быть вставлены в одно место в документе без какой-либо дополнительной обработки.

Получение и выполнение сценариев

Метод getScript() загружает файл JavaScript, а затем выполняет содержащиеся в нем инструкции. Чтобы продемонстрировать работу этого метода, я создал файл myscript.js и сохранил его вместе с файлом test.html на своем веб-сервере. Содержимое этого файла представлено в примере ниже:

Эти инструкции генерируют три ряда элементов, описывающих цветы. Мы обошлись здесь без определения шаблонов и использовали циклы для генерации элементов (хотя, вообще говоря, следовало бы воспользоваться шаблонами данных).

Самое важное, что необходимо знать при работе со сценариям, — между инициализацией Ajax-запроса и выполнением инструкций сценария состояние документа может измениться. В примере ниже приведен сценарий из основного документа, в котором по-прежнему используется метод getScript(), но при этом, еще до завершения Ajax-запроса, модифицируется дерево DOM:

Здесь мы вызываем метод getScript() для основной функции $() и передаем ему в качестве аргумента URL-адрес файла, который хотим использовать. Если сервер способен предоставить указанный файл и этот файл содержит действительный JavaScript-код, то последний будет выполнен.

Метод getScript() можно использовать для загрузки любых сценариев, но особенно полезно использовать его для загрузки и выполнения таких сценариев, как сценарии для отслеживания статистики посещения сайтов или определения географического местоположения клиента, которые не связаны с поддержкой основной функциональности веб-приложения. Пользователя не особенно заботит, в состоянии ли мы точно определять его местоположение для ведения статистики, тогда как длительное ожидание загрузки и выполнения сценария будет действовать ему на нервы.

Используя метод getScript(), можно быстро получать запрашиваемую информацию, не доставляя пользователям неудобств, вызванных необходимостью ожидания ответа. Уточню свою мысль. Я вовсе не предлагаю вам использовать этот метод для выполнения каких-либо действий скрытно от пользователя и говорю лишь о том, что следует отодвигать на второй план загрузку и выполнение вполне законной функциональности, если она представляет для пользователей меньшую ценность, чем затрачиваемое на ее ожидание время.

В данном примере после запуска Ajax-запроса с помощью метода getScript() из документа удаляется элемент row2, для чего используется метод remove(). Данный элемент используется в файле myscript.js для вставки новых элементов. Эти элементы отбрасываются незаметным для пользователя образом, поскольку в документе селектору #row2 ничто не соответствует. Итоговый результат представлен на рисунке:

Отнеситесь к этому примеру как к одному из образцов надежного дизайна для ситуаций, в которых документ подвергается изменениям. Во всяком случае запомните, что при написании внешних сценариев JavaScript не стоит делать слишком много допущений о состоянии документа.

Получение данных в формате JSON

Для загрузки данных JSON с сервера предназначен метод getJSON(). Возможно, это наименее полезный из всех трех вспомогательных методов, поскольку он не делает с данными ничего сверх того, что делает базовый метод get().

Отправка изображения или файла ajax-запросом через jQuery

Задача отправки файла или изображения на сервер без перезагрузки страницы довольно часто возникает. В этом примере разберу сразу 2 фишки: выбор файла по нажатию на кнопку, которая может быть оформлена как угодно, и отображение прогресса при передаче файла на сервер ajax-запросом.

html-код будет такой:

<button id="addfile"><span>Загрузить изображение</span><input type="file" id="load_file" value=""></button>

css код:

#addfile {
  position: relative;
  overflow: hidden;
  width: 180px;
  height: 34px;
}
#load_file {
  position: absolute;
  top: 0;
  left: 0;
  width: 180px;
  height: 34px;
  font-size: 0px;
  opacity: 0;
  filter: alpha(opacity:0);
}
#load_file:hover {
  cursor: pointer;
}

Суть идеи в том, что поверх кнопки выводится стандартный input для выбора файла, но он полностью прозрачен и имеет такие же размеры как кнопка. Таким образом, пользователь видит кнопку button, но когда наводит на нее курсор, фактически наводит на input. Соответственно, когда он нажимает на кнопку, на самом деле нажимается input выбора файла. Для того, чтобы не мигал курсор после выбора файла, размер шрифта задан 0px.

Теперь javascript код отправки файла на сервер с отображением прогресса:

$(function() {
  $('#load_file').on('change', loadfile);
});

function loadfile() {
  $('#addfile span').html('Загружено 0 %');
  files = $('#load_file').files;
  var form = new FormData();
  form.append('upload', files);
  $.ajax({
    url: '<url-адрес>',
    type: 'POST',
    data: form,
    cache: false,
    processData: false,
    contentType: false,
    xhr: function() {
      var myXhr = $.ajaxSettings.xhr();
      if (myXhr.upload) {
        myXhr.upload.addEventListener('progress',ShowProgress, false);
      }
      return myXhr;
    },
    complete: function(data){
      $('#addfile span').html('Загрузить изображение');
      $('#load_file').val('');
    },
    success: function(message){
      alert(message);
    },
    error: function(jqXHR, textStatus, errorThrown) {
      alert(textStatus+' '+errorThrown);
    }
  });
}

function ShowProgress(e) {
  if(e.lengthComputable){
    $('#addfile span').html('Загружено '+Math.round(100*e.loaded/e.total)+' %');
  }
}

При загрузке файла на сервер в кнопке будет показываться сколько % уже передано на сервер. После завершения загрузки название кнопки возвращается как было, а значение input-а с файлом устанавливается пустым, чтобы можно было снова выбирать новый файл.

Пример серверной части на php (по просьбе Евгения):

  $message = '';
  if (empty($_FILES) || $_FILES == "none") {
    $message = 'Вы не выбрали файл';
  } else if ($_FILES == 0 || $_FILES > 9437184) {
    $message = 'Размер файла не соответствует нормам (максимум 9 Мб)';
  } else if (($_FILES != 'image/jpeg') && ($_FILES != 'image/pjpeg') &&
             ($_FILES != 'image/gif') && ($_FILES != 'image/png')) {
    $message = 'Допускается загрузка только картинок JPG, GIF и PNG.';
  } else if (!is_uploaded_file($_FILES)) {
    $message = 'Что-то пошло не так. Попытайтесь загрузить файл ещё раз.';
  } else {
    $ftype = $_FILES;
    $fname = 'newname_image.'.($ftype == 'image/gif' ? 'gif' : ($ftype == 'image/png' ? 'png' : 'jpg'));
    if (move_uploaded_file($_FILES, $_SERVER.'/files/'.$fname)) {
      $message = 'Изображение успешно загружено.';
    } else {
      $message = 'Что-то пошло не так. Попытайтесь загрузить файл ещё раз.';
    }
  }
  exit($message);

Информация о загруженном изображении будет содержаться в $_FILES, т.к. скриптом файл добавлялся так: form.append(‘upload’, files); Соответственно, всё что требуется от php-программы — это проверить что файл соответствует ожидаемым параметрам, перенести файл в нужную папку (в примере в папку files) под нужным именем (в примере newname_image) и вернуть в браузер ответ, который в моем примере просто выводится пользователю командой alert(message);

HTML-форма с загрузкой файла изображения

На целевой странице отображается HTML-форма с элементом загрузки файла. Пользователи выбирают файл и отправляют его с помощью AJAX.

Библиотеки jQuery и jQuery Form подключены в начале скрипта. Скрипт валидации jQuery проверяет, был ли выбран файл изображения перед отправкой формы.

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">

<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
   ></script>
<script src="jquery.form.min.js"></script>

</head>
<body>
    <h1>jQuery Ajax Image Upload with Animating Progress Bar</h1>
    <div class="form-container">
        <form action="uploadFile.php" id="uploadForm" name="frmupload"
            method="post" enctype="multipart/form-data">
            <input type="file" id="uploadImage" name="uploadImage" /> <input
                id="submitButton" type="submit" name='btnSubmit'
                value="Submit Image" />

        </form>
        <div class='progress' id="progressDivId">
            <div class='progress-bar' id='progressBar'></div>
            <div class='percent' id='percent'>0%</div>
        </div>
        <div style="height: 10px;"></div>
        <div id='outputImage'></div>
    </div>
</body>
</html>

Отправка данных формы с помощью AJAX для выполнения загрузки файла

Для отправки данных формы с помощью AJAX используется библиотека jQuery Form. Функция ajaxForm() применяет для отправки в PHP файлов с изображениями.

Ход загрузки отображается с помощью индикатора в функции обратного вызова uploadProgress. Также для создания эффекта прогресса вызывается jQuery-метод animate().

<script>
$(document).ready(function () {
    $('#submitButton').click(function () {
    	    $('#uploadForm').ajaxForm({
    	        target: '#outputImage',
    	        url: 'uploadFile.php',
    	        beforeSubmit: function () {
    	        	  $("#outputImage").hide();
    	        	   if($("#uploadImage").val() == "") {
    	        		   $("#outputImage").show();
    	        		   $("#outputImage").html("<div class='error'>Choose a file to upload.</div>");
                    return false; 
                }
    	            $("#progressDivId").css("display", "block");
    	            var percentValue = '0%';

    	            $('#progressBar').width(percentValue);
    	            $('#percent').html(percentValue);
    	        },
    	        uploadProgress: function (event, position, total, percentComplete) {

    	            var percentValue = percentComplete + '%';
    	            $("#progressBar").animate({
    	                width: '' + percentValue + ''
    	            }, {
    	                duration: 5000,
    	                easing: "linear",
    	                step: function (x) {
                        percentText = Math.round(x * 100 / percentComplete);
    	                    $("#percent").text(percentText + "%");
                        if(percentText == "100") {
                        	   $("#outputImage").show();
                        }
    	                }
    	            });
    	        },
    	        error: function (response, status, e) {
    	            alert('Oops something went.');
    	        },
    	        
    	        complete: function (xhr) {
    	            if (xhr.responseText && xhr.responseText != "error")
    	            {
    	            	  $("#outputImage").html(xhr.responseText);
    	            }
    	            else{  
    	               	$("#outputImage").show();
        	            	$("#outputImage").html("<div class='error'>Problem in uploading file.</div>");
        	            	$("#progressBar").stop();
    	            }
    	        }
    	    });
    });
});
</script>

Функции обратного вызова:

Плагин Lazy имеет четыре функции обратного вызова, которые срабатывают в разных точках загрузки элемента.

• — вызывается прежде чем картинка будет загружена
• — вызывается после успешной загрузки изображения
• — вызывается когда картинка не может быть загружена
• — вызывается когда все фотографии загружены или была возвращена ошибка

Пример:

<img class=»lazy» data-src=»images/1.jpg» />
<img class=»lazy» data-src=»images/2.jpg» />
…
<img class=»lazy» data-src=»images/9.jpg» />
<img class=»lazy» data-src=»images/missing.jpg» />

1 2 3 4 5

<img class=»lazy»data-src=»images/1.jpg» /> <img class=»lazy»data-src=»images/2.jpg» /> … <img class=»lazy»data-src=»images/9.jpg» /> <img class=»lazy»data-src=»images/missing.jpg» />

img.lazy {
width: 700px;
height: 467px;
display: block;
}

1 2 3 4 5

img.lazy { width700px; height467px; displayblock; }

$(function() {
$(‘.lazy’).lazy({
beforeLoad: function(element) {
var imageSrc = element.data(‘src’);
console.log(‘изображение «‘ + imageSrc + ‘» начало загружаться’);
},
afterLoad: function(element) {
var imageSrc = element.data(‘src’);
console.log(‘изображение «‘ + imageSrc + ‘» загрузилось’);
},
onError: function(element) {
var imageSrc = element.data(‘src’);
console.log(‘изображение «‘ + imageSrc + ‘» не может быть загружено’);
}
onFinishedAll: function() {
console.log(‘загружены все изображения’);
}
});
});

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

$(function(){ $(‘.lazy’).lazy({ beforeLoadfunction(element){ varimageSrc=element.data(‘src’); console.log(‘изображение «‘+imageSrc+'» начало загружаться’); }, afterLoadfunction(element){ varimageSrc=element.data(‘src’); console.log(‘изображение «‘+imageSrc+'» загрузилось’); }, onErrorfunction(element){ varimageSrc=element.data(‘src’); console.log(‘изображение «‘+imageSrc+'» не может быть загружено’); } onFinishedAllfunction(){ console.log(‘загружены все изображения’); } }); });

Ajax-запросы функциями GET и POST

Эти функции осуществляют отправку ajax запроса http-методами get и post. Приведу пару примеров их использования.

$.get(
  '<url-адрес>',          // адрес отправки запроса
  {par1:val1, par2:val2, ...},  // передача с запросом каких-нибудь данных
  function(data) {              
    // какие-то действия с полученными от сервера данными data
  }
);

Передача данных не обязательна, как и выполнение каких-либо действий после получения ответа от сервера, т.е. в этом случае, строчки 3 и 4-6 можно удалить при необходимости и таким образом еще сократить код.

Тип получаемых от сервера данных можно указать, добавив dataType (см.ниже) — по-умолчанию определяется автоматически.

Использование post аналогично, но в следующем примере использую вызов функции после получения ответа от сервера.

$.post(
  '<url-адрес>',
  {par1:val1, par2:val2, ...},
  onSuccess
);

function onSuccess(data) {
  // какие-то действия с полученными от сервера данными data
}

На самом деле, функции get и post являются сокращенными вариантами функции ajax, которую рассмотрю ниже.

Как создать или вставить данные с помощью jQuery AJAX?

5.1 Обработчик нажатия кнопки «Создать товар»

Откройте в папке products файл create-product.js

Следующий код будет обрабатывать нажатие кнопки. Эта кнопка должна иметь класс create-product-button.

5.2 Получение списка категорий из API

Нам нужно получить список категорий из API, потому что мы создадим поле выбора (select) «категории». Здесь пользователь сможет выбрать категорию продукта.

Замените // здесь будет вызов API категорий следующим кодом.

5.3 Создание кнопки выбора категории

Здесь мы создадим тег select с опцией «Categories».

Поместите следующий код после открывающей фигурной скобки предыдущего раздела.

5.4 Добавление кнопки «Все товары»

Кнопка «Все товары» необходима, чтобы мы могли вернуться к списку товаров.

Поместите следующий код после кода предыдущего раздела.

5.5 Создание HTML-формы «Создание товара»

Теперь мы создадим HTML-форму «Создание товара». Здесь пользователь может ввести информацию о новом продукте, которая будет отправлена на сервер.

Поместите следующий код после кода предыдущего раздела.

5.6 Показать форму «Создание товара» и изменить заголовок страницы

Мы должны сделать так, чтобы кнопка и форма появлялись на нашей веб-странице. Также изменим заголовок страницы.

Добавьте следующий код после кода предыдущего раздела.

5.7 Обработчик кнопки «Создать товар», получение данных формы и отправка данных на сервер

Если форма «Создание товара» отправлена, нам нужен скрипт для ее обработки.

Замените комментарий // здесь будет обработчик «создать форму товара» следующим кодом.

AJAX Загрузка файлов: пример для WordPress

Для WordPress обрабатывать AJAX запрос в разы проще, потому что есть готовые функции, например media_handle_upload().

Первый и второй шаг аналогичные, а в третьем шаге будем использовать встроенную функцию, которая добавит файл в медиатеку и привяжет его к текущему посту.

Чтобы код ниже начал работать, его нужно добавить в файл темы functions.php. Далее, создать страницу с ярлыком ajax_file_upload и зайти на эту страницу. В контенте вы увидите форму для добавления файла. Выбираете файлы и проверяете все ли загрузилось…

Это полноценный пример того, как безопасно загрузить файлы на сервер в среде WordPress.

<?php

// форма
add_action( 'the_content', 'ajax_file_upload_html' );

// скрипт
add_action( 'wp_footer', 'ajax_file_upload_jscode' );

// AJAX обработчик
add_action( 'wp_ajax_'.'ajax_fileload',        'ajax_file_upload_callback' );
add_action( 'wp_ajax_nopriv_'.'ajax_fileload', 'ajax_file_upload_callback' );

// HTML код формы
function ajax_file_upload_html( $text ){
	// выходим не наша страница...
	if( $GLOBALS->post_name !== 'ajax_file_upload' )
		return $text;

	return $text .= '
		<input type="file" multiple="multiple" accept="image/*">
		<button class="upload_files">Загрузить файл</button>
		<div class="ajax-reply"></div>
	';
}

// JS код
function ajax_file_upload_jscode(){
	?>
	<script>
		jQuery(document).ready(function($){

			// ссылка на файл AJAX  обработчик
			var ajaxurl = '<?= admin_url('admin-ajax.php') ?>';
			var nonce   = '<?= wp_create_nonce('uplfile') ?>';

			var files; // переменная. будет содержать данные файлов

			// заполняем переменную данными, при изменении значения поля file
			$('input').on('change', function(){
				files = this.files;
			});

			// обработка и отправка AJAX запроса при клике на кнопку upload_files
			$('.upload_files').on( 'click', function( event ){

				event.stopPropagation(); // остановка всех текущих JS событий
				event.preventDefault();  // остановка дефолтного события для текущего элемента - клик для <a> тега

				// ничего не делаем если files пустой
				if( typeof files == 'undefined' ) return;

				// создадим данные файлов в подходящем для отправки формате
				var data = new FormData();
				$.each( files, function( key, value ){
					data.append( key, value );
				});

				// добавим переменную идентификатор запроса
				data.append( 'action', 'ajax_fileload' );
				data.append( 'nonce', nonce );
				let pid_match = $(document.body).attr('class').match( /postid-(+)/ );
				data.append( 'post_id', pid_match ? pid_match : 0 );

				var $reply = $('.ajax-reply');

				// AJAX запрос
				$reply.text( 'Загружаю...' );
				$.ajax({
					url         : ajaxurl,
					type        : 'POST',
					data        : data,
					cache       : false,
					dataType    : 'json',
					// отключаем обработку передаваемых данных, пусть передаются как есть
					processData : false,
					// отключаем установку заголовка типа запроса. Так jQuery скажет серверу что это строковой запрос
					contentType : false,
					// функция успешного ответа сервера
					success     : function( respond, status, jqXHR ){
						// ОК
						if( respond.success ){
							$.each( respond.data, function( key, val ){
								$reply.append( '<p>'+ val +'</p>' );
							} );
						}
						// error
						else {
							$reply.text( 'ОШИБКА: ' + respond.error );
						}
					},
					// функция ошибки ответа сервера
					error: function( jqXHR, status, errorThrown ){
						$reply.text( 'ОШИБКА AJAX запроса: ' + status );
					}

				});

			});

		})
	</script>
	<?php
}

// обработчик AJAX запроса
function ajax_file_upload_callback(){
	check_ajax_referer( 'uplfile', 'nonce' ); // защита

	if( empty($_FILES) )
		wp_send_json_error( 'Файлов нет...' );

	$post_id = (int) $_POST;

	// ограничим размер загружаемой картинки
	$sizedata = getimagesize( $_FILES );
	$max_size = 2000;
	if( $sizedata/*width*/ > $max_size || $sizedata/*height*/ > $max_size )
		wp_send_json_error( __('Картинка не может быть больше чем '. $max_size .'px в ширину или высоту...','km') );

	// обрабатываем загрузку файла
	require_once ABSPATH . 'wp-admin/includes/image.php';
	require_once ABSPATH . 'wp-admin/includes/file.php';
	require_once ABSPATH . 'wp-admin/includes/media.php';

	// фильтр допустимых типов файлов - разрешим только картинки
	add_filter( 'upload_mimes', function( $mimes ){
		return [
			'jpg|jpeg|jpe' => 'image/jpeg',
			'gif'          => 'image/gif',
			'png'          => 'image/png',
		];
	} );

	$uploaded_imgs = array();

	foreach( $_FILES as $file_id => $data ){
		$attach_id = media_handle_upload( $file_id, $post_id );

		// ошибка
		if( is_wp_error( $attach_id ) )
			$uploaded_imgs[] = 'Ошибка загрузки файла `'. $data .'`: '. $attach_id->get_error_message();
		else
			$uploaded_imgs[] = wp_get_attachment_url( $attach_id );
	}

	wp_send_json_success( $uploaded_imgs );

}

Custom Elements: пользовательские элементы

Одна технология, наделавшая шуму в последние годы, — Custom Elements: библиотека компонентов, встроенная в браузер, что означает отсутствие необходимости для пользователя качать, парсить и компилировать дополнительные байты фреймворка.

Мы создали несколько пользовательских элементов на основе спецификации v0 с 2014 года. Однако, поскольку стандарты в то время постоянно менялись, мы сильно в это не вкладывались. А начали только с 2017 года, когда была выпущена спецификация Web Components v1, реализованная как в Chrome, так и в Safari.

Во время перехода с jQuery мы искали структуры, которые можно было бы извлечь в качестве пользовательских элементов. Например, мы преобразовали код facebox, использованный для отображения модальных диалогов, в .

Наша общая философия прогрессивного улучшения относится и к пользовательским элементам. Это значит, что мы стараемся хранить как можно больше контента в разметке и только добавлять поведение поверх неё. Например, по умолчанию показывает исходную временную метку, но с улучшением может переводить время в местный часовой пояс, а , расположенный внутри элемента , интерактивен даже без JavaScript, но может быть улучшен до расширенных возможностей доступа.

Вот пример того, как можно реализовать элемент :

Один из аспектов Web Components, который мы очень хотим перенять, — Shadow DOM. У Shadow DOM есть потенциал для раскрытия множества возможностей для веба, однако он также усложняет полифиллинг. Так как его полифиллинг на данный момент приведёт к снижению производительности даже для кода, который управляет частями DOM, не относящихся к веб-компонентам, для нас нецелесообразно использовать его в продакшне.

Что такое lazy loading изображений

Lazy loading или «ленивая загрузка» — это способ отложенной загрузки изображений, когда картинки подгружаются не сразу вместе с запрашиваемой страницей, а по мере надобности, асинхронно. Функция работает на технологии AJAX с помощью JavaScript.

Способ работает для картинок img и фреймов iframe. У этих элементов есть атрибут src, указывающий на источник.

Варианты отложенного отображения контента:

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

На демонстрационной странице indexoid.com/speed картинки загружаются по мере просмотра:

Отображение загрузки картинок на странице при скроллингеКод страницы indexoid.com/speed

Не стоит настраивать такую загрузку для элементов на первом экране — они должны загружаться сразу же, как только пользователь зашел на страницу.

Как ПС относятся к отложенной загрузке

Раньше у Google была проблема с индексированием контента с атрибутом loading, сейчас бот воспринимает такие элементы. Но нужно убедиться, что все материалы страницы доступны для Googlebot.

Каким сайтам нужно внедрять отложенную загрузку

В пятом выпуске рубрики «Спроси PR-CY» один из пользователей задал эксперту вопрос о способах оптимизации картинок на сайте:

Ответил Михаил Шакин, автор SEO-блога и специалист по продвижению сайтов в рунете и англоязычном интернете:

Ориентируйтесь на целесообразность внедрения функции на ваш сайт. С одной стороны, использование такой оптимизации ускорит загрузку сайта, уменьшит время ожидания пользователей и сэкономит им трафик, поскольку они будут использовать его только для картинок, которые видят.

С другой, веб-мастеру нужно прикладывать дополнительные усилия по настройке функции, которая пока будет работать не на всех браузерах.

В каких случаях стоит внедрять lazy loading:

1. На страницах много больших изображений.
2. Картинки составляют основную часть контента — вы продвигаете сервисы с фотографиями, фотостоки, статейники с большим количеством иллюстраций и фреймов.
3. Невысокий балл PageSpeed ​​Insights.
4. Много посетителей с мобильных устройств, больше 50%.
5. Конкуренты быстрее вас, хотя вы уже провели оптимизацию и ускорение страниц.
6. Сервер слабый и не может дать быструю загрузку.

Проверить скорость загрузки сайта можно с помощью сервиса «Анализ сайта». Он проверит загрузку в соответствии с новыми требованиями поисковиков и даст советы, что сделать, чтобы ее улучшить.

Фрагмент проверки скорости