Як дізнатися завантажена на чи картинка через jquery

Роблячи скрипти на jQuery іноді потрібно працювати з зображеннями після їх повного завантаження, наприклад, щоб правильно вирахувати розміри картинки.

З даною проблемою я зіткнувся, коли робив .each () перегородку картинок. Скрипт повинен був знайти кожну картинку, визначити її розміри і на їх підставі вписати в рамку.

Якщо я не використовував перевірку - завантажилася чи картинка, то розміри визначалися неправильно. Нагадаю, їх можна визначити так (в коді я відразу округляти значення в пікселях):

Якщо ви запустите цей код, то розміри картинки 564.jpg будуть визначатися через раз. У мене, наприклад 1 з 10 раз не спрацьовує. Проблема в тому, що картинка може не встигнути прогрузити, а скрипт буде вже запущений. Тому визначення розмірів не відбудеться.

Виправимо код, щоб можна було перевірити, прогузілась чи картинка і в залежності від цього виконати наш код:

Тут ми використовуємо подія $ (img) .on ( 'load', function ()<>); яке дозволяє визначити, завантажилася чи картинка і тільки після цього виконати скрипт. Це рішення підійде в 90% випадках.

Якщо ви використовуєте функції для визначення завантажена картинка, то скрипт потрібно модернізувати. Справа в тому, що картинка може запам'ятатися в кеші (що і було в мене з Joomla) і грузиться відразу з нього. В цьому випадку, картинка не буде скачиваться з сайту, а буде братися з кеша і подія load не спрацює. Перевірити це можна по черзі натискаючи F5 і комбінацію (Ctrl + F5). Якщо з'явиться 0, то у вас кеш.

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

>);

Читайте також

Як дізнатися завантажена на чи картинка через jquery

Як дізнатися завантажена на чи картинка через jquery

Як дізнатися завантажена на чи картинка через jquery

Як дізнатися завантажена на чи картинка через jquery

Fancybox 3 - додаткові можливості

Як вставити флеш гри і swf ролики на сайт

Схожі статті