Роблячи скрипти на jQuery іноді потрібно працювати з зображеннями після їх повного завантаження, наприклад, щоб правильно вирахувати розміри картинки.
З даною проблемою я зіткнувся, коли робив .each () перегородку картинок. Скрипт повинен був знайти кожну картинку, визначити її розміри і на їх підставі вписати в рамку.
Якщо я не використовував перевірку - завантажилася чи картинка, то розміри визначалися неправильно. Нагадаю, їх можна визначити так (в коді я відразу округляти значення в пікселях):
Якщо ви запустите цей код, то розміри картинки 564.jpg будуть визначатися через раз. У мене, наприклад 1 з 10 раз не спрацьовує. Проблема в тому, що картинка може не встигнути прогрузити, а скрипт буде вже запущений. Тому визначення розмірів не відбудеться.
Виправимо код, щоб можна було перевірити, прогузілась чи картинка і в залежності від цього виконати наш код:
Тут ми використовуємо подія $ (img) .on ( 'load', function ()<>); яке дозволяє визначити, завантажилася чи картинка і тільки після цього виконати скрипт. Це рішення підійде в 90% випадках.
Якщо ви використовуєте функції для визначення завантажена картинка, то скрипт потрібно модернізувати. Справа в тому, що картинка може запам'ятатися в кеші (що і було в мене з Joomla) і грузиться відразу з нього. В цьому випадку, картинка не буде скачиваться з сайту, а буде братися з кеша і подія load не спрацює. Перевірити це можна по черзі натискаючи F5 і комбінацію (Ctrl + F5). Якщо з'явиться 0, то у вас кеш.
Змінимо скрипт так, щоб ми могли визначити звідки береться картинка з кешу або завантажується з сайту:
>);
Читайте також
Fancybox 3 - додаткові можливості
Як вставити флеш гри і swf ролики на сайт