Уявіть ситуацію, коли Ви заходите на новий сайт. Весь вміст сайту, яке Вам необхідно, как-будто не вантажиться. Ви не знаєте чи відбувається щось або просто на сторінці нічого немає. Зрештою, Ви залишаєте сторінку.
Така ситуація дуже поширена, коли на різних сайтах використовуються великі файли при завантаженні. Щоб впоратися з такою ситуацією необхідно використовувати іконку завантаження, яка буде показувати що сайт вантажиться.
В даному простому уроці Ви дізнаєтеся як це зробити на своїй сторінці.
Демо версія знаходиться тут. Файли можна завантажити тут.
1. Іконка завантаження, яку можна вибрати тут. Для нашого уроку я буду використовувати:
2. На початку документа між тегами
необхідно підключити jQuery (пам'ятаєте про шлях до файлу).3. Додамо функцію відразу після верхнього коду, яка буде ховати шар ( "large-img") з контентом (в прикладі використовується велика картинка, але на її місці може бути що-завгодно) до тих пір, поки він повністю не завантажиться. Після завантаження функція буде його виводити, а шар ( "loader") з іконкою ховати.
От і все! Користуйтеся Вдалого всім вікенду!
P.S. на прохання наших шановних відвідувачів пропоную Вам CSS код, який допоможе помістити іконку завантаження по центру:
Для того, щоб все працювало необхідно обов'язково знати ширину і висоту картинки завантаження. У нашому прикладі висота - 22 пікселя, ширина - 126 пікселів. Її ми задали в коді. Також в двох рядках Вам необхідно буде внести 50% ширини і висоти.
Також необхідно буде надати зображенні клас "centered":
Ось і все відмінно працює :) Демо версія поки не оновлена.
5 останніх уроків рубрики "jQuery"
Сьогодні ми б хотіли вам розповісти про бібліотеку TypeIt - безкоштовному jQuery плагін. З її допомогою можна імітувати набір тексту. Якщо все налаштувати правильно, то можна домогтися дуже реалістичного ефекту.
jQuery плагін для створення тимчасової шкали.
jQuery плагін для створення діаграми Ганта.
Приклад того як здійснити завантаження файлу через PHP і jQuery ajax.
Дякуємо. корисна річ
при наступних запусках чому то немає завантаження іконки, а відразу виводитися малюнок. тестіл Оперою.
dima, просто картинка вже в кеші, вантажиться швидко і прогрес-картинка не встигає Показати
Я вобщем не знаю. Я з початок завантажую сторінку показує завантаження, через 10 20 сек роблю оновити і все загрузилось.
Здогадався, як можна застосувати таку штуку для всього сайту: Просто привласнити id = "large-img" скажімо для головної таблиці-каркаса сайту. Все працює, тільки навпаки))) Тобто спочатку завантажується весь сайт, а потім він весь пропадає))) треба як то переробити скрипт цей: $ (function () <$('#large-img').hide(); $('#large-img').load( function() <$('#loader').hide(); $('#large-img').show();> );>) Я саме в цьому не розбираюся може разом подумаємо!
Для завантаження сторінки код повинен випрасувати так: $ (function () <$('#wrapper').hide(); $(window).load(function() <$('#loader').hide(); $('#wrapper').show();>);>); ------------------- * де "wrapper" - ідентифікатор головної таблиці або div-елемента. ------------------- У мене код сторінки наступний і все працює:
Все підключив, зробив як Fenex прописав, прибрав два рядки з стилю: margin-top: -11px; / * 50% висоти * / margin-left: -63px; / * 50% ширини * / і все працює на всю сторінку. Просто супер! Дякуємо!
У вас помилка в уроці Дві зайві лапки!
Прошу, допоможіть. Мені потрібно цю іконку використовувати в ситуації з аплоудером. Коли вибираєш картинку, тиснеш "Завантажити" і щоб у цей момент з'являлася ця іконку на місці картинки, а після завантаження картинка, іконка зникала.
це напевно для повільного інтернету оскільки я взагалі не побачив завантаження))
А чи не простіше створити div і в background-image вибрати гифку прелоадер?
djamalutdin
цю фішку я повністю встановив, все подобається але. така проблема що на сайті встановлений: jQuery plugin for faster page loads, і сама перезавантаження сторінок не відбувається, але сторінки відкривається з невеликою затримкою, так от не підкажете ви як можна влаштувати таку ж фішку як в цьому уроці тільки на цю затримку jQuery плагіна ?
За рахунок отримання інформації відразу по двох каналах (зір і слух) ефективність навчання значно перевершує навчання по книгах. А домашні завдання і онлайн-тести дозволять вам постійно думати на мові, що вивчається і відразу перевіряти свої знання!
Якщо ви давно хочете як слід вивчити HTML, то у мене для Вас є чудова новина!
Якщо ви вже вивчили HTML і хочете рухатися далі, то наступним кроком буде вивчення технології CSS.
Якщо ви хочете розібратися з поняттями домену і хостингу, навчитися створювати бази даних, закачувати файли сайту на сервер по FTP, створювати піддомени, налаштовувати поштові скриньки для свого сайту і стежити за його відвідуваністю, то цей курс створений спеціально для вас!