Отложенная загрузка контента. Управление загрузкой изображений. Влияние отложенной загрузки на SEO

27.10.2019 Скайп

А этом уроке я покажу вам пример интеграции замечательного плагина Dropzone.js с вашим сайтом на php для загрузки файлов на сервер буквально в несколько строк кода.

Dropzone.JS это замечательная опенсурс библиотека написанная на ванильном JS предоставляющая вам интерфес для загрузки файлов drag and drop с предварительным просмотром файлов.

Для начала скачайте свежую версию библиотеки и её стили:

Затем создайте папку uploads и файлы index.php и upload.php

В качестве файла index php может выступать та часть вашего кода, которая содержит форму добавления материалов на сайт. В моём примере я создам чистую страницу с минимальной разметкой и подключеной библиотекой и стилями Dropzone.js:

Как вы наверное заметили мы создали форму с экшеном upload.php, но не создавали никаких инпутов для прикрепления файлов, и не объявляли enctype формы. В этом нет никакой ошибки, все обрабатывается самой библиотекой DropzoneJS. Все, что нам нужно сделать, это присвоить форме класс dropzone. По умолчанию DropzoneJS находит все формы с данным классом и автоматически потрисовывет свой интерфейс.

Вы пожете открыть на исполнение в браузете страницу index.php и убедиться что библиотека срабатывает как задумано. Вот что у меня получилось:

Теперь давайте создадим обработчик загрузки для которого мы уже создали файл upload.php. Привожу пример моего простейшего кода загрузки:

Работа с загруженными файлами

Для полноценного взаимодействия с вашими фалами, нам осталась добавить возможность манипулировать ими. Для начала нам нужно добавить фрагмент кода для извлечения информации о хранящихся файлах (имя и размер) и вернуть его в формате JSON.

Для этого обновляем файл upload.php до такого вида (вставлено условие else):

Функция PHP scandir просматривает папку uploads и возращает массив файлов или значение FALSE елси папка пуста.

Перебираем возвращаемое значение из функции scandir и сохраняем в массив $ result. Помните, мы игнорируем "." И "..", поскольку scandir всегда будет возвращать "." И ".." в качестве допустимого содержимого, относящегося к текущему и предыдущему каталогу.

Выводим правильные заголовки для разметки JSON, а также конвертируем PHP-массив в JSON-строку, используя функцию json_encode.

Теперь пришло время обновить index.php:

Dropzone.options.myDropzone = { init: function() { thisDropzone = this; $.get("upload.php", function(data) { $.each(data, function(key,value){ var mockFile = { name: value.name, size: value.size }; thisDropzone.options.addedfile.call(thisDropzone, mockFile); thisDropzone.options.thumbnail.call(thisDropzone, mockFile, "uploads/"+value.name); }); }); } };

Что мы тут накодили? Давайте разбиратся:

Увы и ах, мы добавили библиотеку Jquery на нашу страницу. Это на самом деле не необходимость для DropzoneJs. Мы используем только ajax-функцию JQuery $ .get. Вы же на своё усмотрение можете реализовать подобные запросы на vue.js или что вам больше по душе.

Мы добавили в форму элемент ID (my-dropzone). Это необходимо, для того что бы передать значения конфигурации в Dropzone. И для этого мы должны иметь уникальный индификатор указывающий на него. Таким образом мы можем настроить библиотеку, присвоив значения Dropzone.options.myDropzone.

Инициализируем основную часть редактирования. То, что мы здесь сделали, - передали функцию прослушивания события init Dropzone. Это событие вызывается, когда Dropzone инициализируется.

Получаем массив файлов из «upload.php» посредством ajax.

Создаём mockFile, используя значения с сервера. MockFile - это просто объекты JavaScript со свойствами имени и размера. Затем мы явно вызываем функции Dropbox и добавляем иконки, чтобы поместить существующие файлы в область загрузки Dropzone и создать их миниатюры.

Если вы сделали всё корректно. Загрузите несколько изображений и перезагрузите страницу с формой. Ранее загруженные файлы должны автоматически отображаться в области Dropzone.

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

Решение

Как видно из примера выше, файлы отправляются на сервер сразу же после выбора. Отправим их по событию:

Window.onload = function(){ var uploader = new qq.FileUploader({ autoUpload: false, element: document.getElementById("file-uploader"), action: "php/upload.php" }); $("#startUpload").on("click", function(){ uploader.uploadStoredFiles(); }); };

Результат

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

Стилизация

Плагин создает свою структуру на базе класса.qq-uploader, все элементы описаны в css файле fileuploader.css

На заметку

Если ослы упорно отказываются работать, открываем скрипт, ищем там строку:

Var form = qq.toElement("");

и меняем на:

Var form = qq.toElement("");

Подготовили: Евгений Рыжков и Егор Скорняков Дата публикации: 12.06.2011

Задача

Решение

Смотрим демо пример . Пример можно забрать архивом . Проверено:

IE 6-9
Firefox 3.6-4
Opera 11.1
Chrome
Safari 5

Обращу внимание, что в данном случае проверено!= работает:

IE включая 9-ю версию не поддерживает File API (старая реализация);
Firefox 3.6+ поддерживает все, что нужно. Для более старых версий — старая реализация;
Opera 11.1 поддерживает File API, но не поддерживает DnD;
Chrome, начиная с 10-й версии, поддерживает все, что нужно;
Safari поддерживает все что нужно с 6-й версии.

Какой толк от этого в таком случае? Пользователи нормальных браузеров получают более удобные сайты.

Что качать:

плагинчик (12Kb в несжатом виде)

Быстрый старт

Подключаем скрипты, а в форму добавляет type =file с . Если браузер не поддерживает необходимый набор API, пользователь сможет загрузить фото «по старинке». Чтобы у него была возможность добавить несколько фото, динамически добавим кнопку «+», которая будет добавлять поля input type=file. Для этих целей в id поля присутствует 0, чтобы проще было организовать правильные имена добавленных полей.

...

Для браузеров, которые поддерживают Dnd и File API можно поля type=file вообще скрыть или удалить.

Как это работает

Если не вдаваться особо в детали, тогда принцип работы можно отобразить в виде подобной схемы:

(DnD API) все начинается когда пользователь отпускает зажатую кнопку мыши — срабатывает событие drop;

(DnD API) получаем объект DataTransfer от события drop;

(File API) вызывая DataTransfer.files получаем FileList — список файлов, которые пользователь перетащил в область загрузки;

(File API) перебирая все файлы читаем их содержимое с помощью объекта FileReader;

(File API) вызывая FileReader.readAsDataURL(../../../collect/js-plugins/ui/file) каждый раз, когда очередной файл удачно прочитан, формируем data URL объект. Когда он полностью будет сформирован произойдет событие onloadend объекта FileReader;

когда мы получили объект data:URL, мы можем подставить эти данные в src и отобразить , а так же отправить данные в двоичном виде на сервер;

(XMLHttpRequest 2) асинхронно отправляем данные, а с помощью новых фишек второй версии протокола XMLHttpRequest получаем данные о состоянии загрузки (событие progress), что позволяет информировать пользователя.

Fine Uploader Plugin

update: 18.09.12 by Андрей Косяк.

Довольно удобный js-плагин по заливке файлов на сервер. Написан на чистом JS. Состоит из серверной части (на нескольких языках) и клиентской (JS и CSS).

НЕ использует флеш и какие-либо фреймворки.

Fineuploader использует XMLHttpRequest объект для передачи файлов с прогрессбаром для современных браузеров, а для всякого треша используется способ со старым добрым iframe-ом.

Знакомимся:

Проект на GitHub
Родная демка
Документация (на англ.)

Проверено:

IE 7-9
Firefox 3.6+
Opera 10.6+
Chrome
Safari 4+

Быстрый старт

Работоспособность плагина нужно проверять исключительно с сервера (локальный подойдет). В примере буду использовать серверную часть на PHP.

Перед первым стартом нужно подготовить почву:

На локальном сервере первое, что попросит скрипт, это увеличить значения параметров post_max_size и upload_max_filesize . Открываем файл php.ini находим эти параметры и ставим значения >= 10M. На реальном сервере скорее всего этот пункт не потребуется.

если тестируем на веб сервере, то ставим ей права 777
если тестируем на локальном, то в свойствах папки убираем галочку "только для чтения" (может работать и без этого)

из папки /server плагина забираем файл php.php . В нем, в первом блоке комментариев написано, какие строки нужно извлечь из комментариев, чтобы инициализировать класс. Добавляем сразу после блока с комментарием:

// допустимые расширения файлов $allowedExtensions = array(); // максимальный размер файла $sizeLimit = 10 * 1024 * 1024; // инициализация класса $uploader = new qqFileUploader($allowedExtensions, $sizeLimit); // тут нужно указать путь к папке /uploads $result = $uploader->handleUpload("../uploads/"); // возврат ответа после сохранения файла echo htmlspecialchars(json_encode($result), ENT_NOQUOTES);

Подключаем скрипт плагина и стили:

Please enable JavaScript to use file uploader.

JS-инициализация:

Window.onload = function(){ var uploader = new qq.FileUploader({ element: document.getElementById("file-uploader1"), action: "php/upload.php" // путь к серверной части плагина }); };

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

Медленная загрузка страниц отрицательно сказывается на SEO оптимизации вашего сайта. В настоящее время многие сайты используют в своих постах изображения в GIF или PNG -формате. Такие изображения имеют больший объём, чем изображения в формате JPEG, в результате загрузка страниц может занять ещё больше времени. Для загрузки каждого такого изображения требуется отдельный HTTP-запрос, что также не способствует ускорению загрузки.

Для решения этой проблемы применяется так называемая «ленивая» или отложенная загрузка, при которой загружаются только те изображения, которые необходимы пользователю. В данной статье приводится описание шести лучших бесплатных плагинов WordPress для “ленивой” загрузки, помогающих значительно повысить скорость загрузки страниц.

1. a3 Lazy Load — лучший плагин ленивой загрузки

Плагин ускоряет блог и повысить визуальный отклик страницы на ПК, планшетах и мобильных телефонах.

a3 Lazy Load не создает нагрузки на сайт и при этом является мобильно ориентированным. Простой в использовании плагин, который ускорит работы сайта. Чем больше на сайте будет тяжелых элементов, тем лучше плагин будет выполнять свою работу и тем больше вы увидите улучшений в производительности.

Ленивая загрузка для всех изображений, граватары, видео и фреймов
Выбор эффектов загрузки
Поддержка WooCommerce
Высокая производительность и низкой нагрузкой
Можно делать исключения изображений и видео
Резервная подключение JavaScript
Поддержка всех браузеров

2. Lazy Load

Это плагин для отложенной загрузки изображений, разработанный WordPress.com, командой TechCrunch и Джеком Голдманом. Он имеет простой код, поэтому не перегружает ресурсы сервера.

Lazy – простой в установке и настройке плагин. Он практически не требует настройки, начиная работу сразу после установки.