Завантаження зображень в браузер

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

Типовий прийом полягає в тому, щоне спочатку завантажують зображення з низьким дозволом з невеликих за обсягом фалів. На їх основі створюються посилання на файли з графікою повноцінного дозволу, які завантажуються тільки при натисканні на посилання. Можна також використовувати в тезі. крім атрибута SRC, атрибут LOWSRC, що дозволяє завантажити спочатку зображення з низьким дозволом, а потім, у міру прийому, замінити його картинкою з великою роздільною здатністю.

За допомогою сценарію можна організувати попередню завантаження зображень в кеш-пам'ять браузера, що не відображаючи їх на екрані. Відображення станеться потім, коли браузер завантажить відповідні теги. Це особливо ефективно при початковому завантаженні сторінки. Поки зображення завантажуються в пам'ять, залишаючись невидимими, користувач може розглядати текстову інформацію.

Для попереднього завантаження зображення слід створити його об'єкт в пам'яті браузера. Такий об'єкт дещо відрізняється від об'єкта зображення, створюваного за допомогою тега. Як і всі об'єкти, створювані сценаріями, об'єкт зображення не відображається у вікні браузера (за відображення відповідає тег). Однак його наявність в коді документа вже забезпечить регулярне пам'ять самого зображення при завантаженні документа. Щоб створити в пам'яті об'єкт зображення, необхідно в сценарії виконати такий вираз:

myimg = new Image (ширина, висота)

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

Тут зліва від оператора привласнення вказано властивість src першого в документі елемента, відповідного тегом. а праворуч - властивість src об'єкта зображення в кеш-пам'яті. Тепер розглянемо як приклад HTML-документ, в якому відображається список назв графічних елементів і одне вихідне зображення. Клацання на елементі списку призводить до відображення відповідного зображення. Всі графічні елементи з цього списку попередньо завантажуються в кеш-пам'ять і тому швидко відображаються при виборі зі списку. Список, як відомо, створюється за допомогою контейнерного тега. що містить теги. Відповідний фрагмент HTML-коду ми сгенерируем за допомогою сценарію і запишемо в поточний документ. Нижче наведено відповідний код:

Зверніть увагу, що для перетворення рядка в справжню посилання на об'єкт використовується функція eval (). HTML-код, що визначає список картинок і згенерований сценарієм, виглядає наступним чином:

Нижче наводиться приклад роботи того, що описано вище:

Схожі статті