Анимация при выполнении php

Анимирование ожидания ответа от сервера

Доброго времени суток
сильно не пенайте не давно стал изучать PHP нашел пример
Анимирование ожидания ответа от сервера
но как им воспользоваться не знаю может кто нить разжевать че к чему
с этим понятно

script src="http://code.jquery.com/jquery-latest.js">  style> /*описание стилей*/ #loadImg тут мой код img id="loadImg" src="img/load.gif" />

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

$.get("/ajaxtest.php", onAjaxSuccess); // - отправим запрос на сервер startLoadingAnimation(); // - запустим анимацию загрузки function onAjaxSuccess(data) // - функция завершения запроса { stopLoadingAnimation(); // дальнейшая работа с полученными от сервера данными . } function startLoadingAnimation() // - функция запуска анимации { // найдем элемент с изображением загрузки и уберем невидимость: var imgObj = $("#loadImg"); imgObj.show(); // вычислим в какие координаты нужно поместить изображение загрузки, // чтобы оно оказалось в серидине страницы: var centerY = $(window).scrollTop() + ($(window).height() + imgObj.height())/2; var centerX = $(window).scrollLeft() + ($(window).width() + imgObj.width())/2; // поменяем координаты изображения на нужные: imgObj.offset(top:centerY, left:centerX); } function stopLoadingAnimation() // - функция останавливающая анимацию { $("#loadImg").hide(); }

Источник

Создание gif анимации на php GD

Наткнулся на весьма интересный класс для создания gif анимации. Для работы класса достаточно библиотеки GD, которая подключена практически на всех серверах поддерживающих php.
Немного помучив этот класс, а написал небольшой пример создания анимированой картинки.

Скачать класс можно тут — ссылка
Ниже приведен код с подробными комментариями:

include('GIFEncoder.class.php'); // подключаем класс для создания gif $frames = array(); // массив для хранения слайдов $framed = array(); // массив для храниения интервалов смены слайдов // создаем первый слайд $image = imagecreatefrompng('img_1.png'); // загрузаем картинку // наносим текст на картинку $color = imagecolorallocate($image, 0, 0, 0); // imagestring($image, 5, 20, 20, "Hello world!", $color); ob_start(); // включаем буферизацию вывода imagegif($image); // пишем в буфер получившийся слайд $frames[] = ob_get_contents(); // записываем в хранилище слайд из буфера $framed[] = 100; // записываем интервал до смены слайда ob_end_clean(); // отключаем буферизацию и чистим буфер // второй слайд $image = imagecreatefrompng('img_2.png'); ob_start(); imagegif($image); $frames[] = ob_get_contents(); $framed[] = 50; ob_end_clean(); // создаем gif картинку из $gif = new GIFEncoder($frames, $framed, 0, 0, 0, 0, 0, 'bin'); $fp = fopen('animation.gif', 'w'); // создаем и открываем файл fwrite($fp, $gif->GetAnimation()); // пишем в него fclose($fp); // закрываем файл

Источник

Как показать анимацию загрузки или индикаторы выполнения при получении данных из базы данных?

• Я извлекаю около 15 000 строк из моей базы данных каждый раз, когда я посещаю эту страницу.
• На странице может потребоваться 8-10 секунд, чтобы завершить загрузку всего — в настоящее время я использую DataTable,
• Я думаю, было бы неплохо показать пользователю любую обратную связь по загрузке в течение этого времени.
• Я хочу создать свою собственную анимацию загрузки и выбрать свой собственный цвет, стиль и размер.

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

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

@RobertoNovelo Извините. Я отредактировал свое сообщение, возможно, использовал Ajax, о котором я мог не знать. Возможно Вы правы !

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

вы ДОЛЖНЫ использовать асинхронный вызов, если не хотите, чтобы страница зависала . ajax-вызовы идеально подходят для этого . просто установите загрузчик перед строкой, прежде чем выполнить вызов, и удалите загрузчик, как только обратный вызов вернется . веб-работа может работать, но выглядит немного излишне, не так ли?

Мне очень нравится ваше предложение. Я думаю, что я должен придерживаться этого. Вы не против ответить? Я знаю, как показать анимацию загрузки, но я не уверен, как ее спрятать.

Но какого черта вы скачиваете 15,00 строк . Как вы можете отображать 15,00 строк на экране? И как это будет ждать 8-10сек? Это плохой и плохой деловой подход. Загрузите 20 в начале и следующие 20 на свитке, и это будет работать быстро и будет удобным для пользователя.

Если вы прочитали мой пост ясно, я использовал DataTable, и DataTable загружает все данные сразу, если только вы не решили сделать это с помощью Ajax и запрашивать только то, что вы ввели в поле поиска — это другая история ,

4 ответа

Начнем с того, что наиболее простым решением является использование ajax-вызова для извлечения строк таблицы, заполненных php.

main.html/main.php

/*This makes the timeout variable global so all functions can access it.*/ var timeout; /*This is an example function and can be disregarded This function sets the loading div to a given string.*/ function loaded() < $('#loading').html('The Ajax Call Data'); >function startLoad() < /*This is the loading gif, It will popup as soon as startLoad is called*/ $('#loading').html(' '); /* This is an example of the ajax get method, You would retrieve the html then use the results to populate the container. $.get('example.php', function (results) < $('#loading').html(results); >); */ /*This is an example and can be disregarded The clearTimeout makes sure you don't overload the timeout variable with multiple timout sessions.*/ clearTimeout(timeout); /*Set timeout delays a given function for given milliseconds*/ timeout = setTimeout(loaded, 1500); > /*This binds a click event to the refresh button*/ $('#start_call').click(startLoad); /*This starts the load on page load, so you don't have to click the button*/ startLoad();

Пример php будет выглядеть примерно так:

/*Database call to get list*/ foreach($list as $li)< echo "$li[var1]$li[var2]"; > 

Более продвинутый способ загрузки вашего контента — использовать webworkers и несколько запросов к базе данных разделены на мелкие куски.

Вы создали бы веб-работников, чтобы сделать небольшие результаты в 100 строк и использовать LIMIT в своих операторах sql, чтобы вывести результаты в маленькие куски. Затем вы можете просмотреть первые 100 результатов, пока другие результаты будут загружены.

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

Если вы хотите изменить анимацию загрузки, просто измените URL. и если вы хотите, чтобы URL-адрес загружался на загрузку страницы, поместите его в сам div.

/*This will make the img load on page load rather than DOM execution.*/ 
  
 

Изображение не обязательно должно быть изображением. Это может быть любой значок загрузки, который вы хотите. Гиф был быстрым и грязным. Вы можете использовать что-то вроде font-awesome spinner

Отлично, пока мне очень нравится твой ответ, это именно то, что я ищу. Я обязательно приму это в ближайшее время. У меня есть 2 быстрых вопроса для вас. 1. Если я хочу изменить стиль, мне просто нужно изменить URL на право src ? это должен быть .gif?

2. Есть ли способ отобразить мою загрузочную анимацию немного раньше? Я замечаю, что примерно через 4 секунды после 11 секунд отображается сообщение об обновлении в браузере. Я хочу, чтобы он отображался, как только я нажал кнопку обновления. Могу ли я сделать это на основе вашего фрагмента?

Источник

Skeleton Screen Loading Effect with Ajax PHP – My programming school

Skeleton loading effect or shimmer effect is a common feature in modern websites. It is shown just before loading the data on page. The effect makes design more user friendly to replace conventional content loading feature using mysql ajax php.

So if you’re developing website and wants to implement Skeleton loading effect or shimmer effect, then it’s very easy. In our previous tutorial, you have learned how to build Newsletter system with PHP and MySQL. In this tutorial, you will learn how to implement Skeleton loading effect or shimmer effect with ajax PHP and MySQL.

We will use placeholder-loading CSS library to load Skeleton content with animation effect. So we will cover this tutorial step by step with live demo to create effect with CSS library using Bootstrap and display data with Ajax.

Skeleton Screen Loading Effect with Ajax PHP

So let’s implement Skeleton Screen Loading Effect with jQuery,ajax PHP and MySQL. The major files are:

Step1: Create MySQL Database Table

First we will create MySQL database table products to store products.

CREATE TABLE `products` ( `id` int(11) NOT NULL, `sku_id` varchar(50) NOT NULL, `category_id` int(11) NOT NULL, `category_name` varchar(255) NOT NULL, `product_name` varchar(300) NOT NULL, `image` varchar(300) NOT NULL, `price` int(11) NOT NULL, `brand` varchar(100) NOT NULL, `material` varchar(100) NOT NULL, `size` varchar(20) NOT NULL, `qty` int(11) NOT NULL, `created_date` datetime NOT NULL, `updated_date` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP ) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Step2: Include Bootstrap, jQuery and CSS Files

In index.php file, we will include Bootstrap, jQuery and CSS files. We will also include placeholder-loading.min.css library file to load Skeleton content with animation.

Step3: Display Skeleton Effect

In index.php file, we will create HTML to display Skeleton loading effect HTML and load product list.

In load_content.js file, we will call function createSkeleton() to display Skeleton effect.

var displayProduct = 5; $('#results').html(createSkeleton(displayProduct));

We will create function createSkeleton() create Skeleton HTML to display effect.

function createSkeleton(limit) var skeletonHTML = ''; for(var i = 0; i < limit; i++) skeletonHTML += '

Step4: Display Product
In load_content.js file, we will call loadProducts() function to display product list after displaying Skeleton effect. Here we will load product after five seconds of displaying effect.
setTimeout(function() loadProducts(displayProduct); , 5000);
 
We will implement function loadProducts() and make Ajax request to load products.
 
function loadProducts(limit) $.ajax( url:"load_action.php", method:"POST", data:action: 'load_products', limit:limit, success:function(data) $('#results').html(data); );
 
In load_action.php file, we will check for action load_products and call method productList() to load product.
 
$product = new Products($db); if(!empty($_POST['action']) && $_POST['action'] == 'load_products') $product->productList();
 
We will implement method productList() to return product list HTML to display.
 
public function productList() if(isset($_POST['limit'])) $sqlQuery = "SELECT * FROM ".$this->productsTable." ORDER BY id DESC LIMIT ".$_POST["limit"].""; $stmt = $this->conn->prepare($sqlQuery); $stmt->execute(); $result = $stmt->get_result(); $productHTML = ''; while ($product = $result->fetch_assoc()) $productHTML .= ' 
 
'.$product["product_name"].' 
 
 
'; echo $productHTML;

Skeleton Screen Loading Effect with Ajax PHP source code You can view the live demo from the Demo link and can download the script from the Download link below. Here you can found complete program of ajax php. After downloading this ajax php file then you can easily use it. This ajax php file will be downloaded in zip format.
Demo Download

Источник