Preloader до моменту повного завантаження зображення

по

08.11.2021

330

Одна з обговорюваних тем на форумах — як зробити preloader до завантаження зображення. У цій статті ми спробуємо реалізувати preloader з допомогою фреймворка JQuery. На даний момент JQuery користується великою популярністю серед розробників, т. к. надає досить комфортне взаємодія javascript і html. Він дозволяє легко звернутися до будь-якого елементу DOM, з можливістю повноцінної маніпуляцією ними, тим самим спрощуючи процес розробки.

Постановка задачі наступна: до моменту повного завантаження зображення, необхідно показувати анімацію «індикатора» завантаження, після того як картинка подгрузилась, показати зображення.

Приступаємо до справи, в заголовку html-документа підключаємо JQuery:

…
…

Далі в тілі документа вставляємо тег , як значення атрибуту src за замовчуванням буде посилання на файл з анімацією «завантаження».

Потім, після вставки тега зображення, вставляємо наступний код:

var img = new Image();
img.onload = function() { $(‘#myImg’).attr(‘src’, img.src); }
img.src = ‘http://www.yournet.kz/images/pic.jpeg’;

Зверніть увагу, в місці, де йде рядок img.src вказується шлях до зображення. Це, мабуть, все. Подібні речі можна використовувати в різних галереях, і т. д., загалом, там, де, ймовірно, доведеться чекати якийсь час моменту повного завантаження великого зображення.

Додав: htmaker, 26.08.2013 р.
(3 голосів, середній: 4,67 з 5)

Завантаження…

Діліться з друзями:

См. також:

Мета тег robots, приклади використання
Рубрика: Html, CSS, Javascript, SEO

Stimed – задаємо CSS-стилі по часу
Рубрика: Html, CSS, Javascript

Небезпека використання атрибуту target=”_blank”
Рубрика: Html, CSS, Javascript, Інф. безпека

Нескінченна анімація обертання на CSS
Рубрика: Html, CSS, Javascript

Анімація обертання при наведенні курсору
Рубрика: Html, CSS, Javascript

Стилізація виділення номера телефону до мобільних браузерах
Рубрика: Html, CSS, Javascript

Список вибору на JQuery
Рубрика: Html, CSS, Javascript

Фіксований заголовок таблиці HTML
Рубрика: Html, CSS, Javascript

Ефекти кнопок для сайту
Рубрика: Html, CSS, Javascript