How to display an animated image /images/ajax-loader.gif when executing a GET request, and in case of receiving data, remove it and display the data.
(this is in jquerymobile, the picture is displayed in the center of the screen)
// Пример запроса $.get("index", "getdata", serverResponse, "json"); 
Very simple:
// блок содержащий картинку, по умолчанию display: none var $preloader = $('.preloader'); // функция для показа картинки, класс active отвечает за видимость // в CSS: .active {display:block} function togglePreloader (state) { $preloader.toggleClass('active', state); } // функция-обертка над $.get запросом function getData () { togglePreloader(true); // показываем прелоадер $.get('url', 'data', dataReady); // запрос на сервер } // сервер вернул данные function dataReady (data) { togglePreloader(false); // скрываем прелоадер // продолжаем работу } 
none and block , the principle of operation, too, understood. Unfortunately, the picture is not displayed. If you remove the class preloader image is present. I came to the conclusion that for some reason the class active is not set. The image was placed before and after the jquery-кода . What to look for? - Plush<div align="center" style="display: none;" class="preloader"><img src="/images/ajax-loader.gif"></div> <div align="center" style="display: none;" class="preloader"><img src="/images/ajax-loader.gif"></div> ====> <div align="center" style="display: none;" class="preloader active"><img src="/images/ajax-loader.gif"></div> <div align="center" style="display: none;" class="preloader active"><img src="/images/ajax-loader.gif"></div> but the second code does not show a picture. Maybe you can change the display property from none to block (maybe I misunderstood working with html) - PlushtogglePreloader(true); inside $.get('url', 'data', dataReady); about the same way you put it inside function getData () { ? - PlushSource: https://ru.stackoverflow.com/questions/461758/
All Articles