Почему предварительная загрузка изображения неэффективна?

Question

Мой проект CMS имеет стильный экран входа в систему web 2.0, который исчезает на экране с помощью JavaScript. Почему же, несмотря на то, что я на 120% уверен, что изображения предварительно загружены (я использовал монитор ресурсов в инструментах разработки), им все равно требуется секунда, чтобы отобразиться при появлении экрана входа в систему. Это полностью разрушает воображение! Взгляните:

http://www.dahwan.info/Melior (ссылка не работает)

Когда вы нажимаете кнопку «Войти», предполагается, что экран становится блеклым, используя изображение с разрешением 75% альфа 1px png. Несмотря на то, что изображение предварительно загружено, оно не отображается до тех пор, пока анимация не будет завершена. Однако, если вы нажмете «Отмена» и войдете в систему снова, анимация будет проходить плавно и идеально.

Может кто-нибудь придумать решение этой проблемы? Я имею это с остальной частью GUI моей CMS также. Как будто не было предварительной загрузки изображения.

Спасибо за ответы

РЕДАКТИРОВАТЬ: Ах да, я в настоящее время разрабатываю эту CMS для Google Chrome 5.0.375.99, добавив совместимость нескольких браузеров позже. Извините, что пропустил это

Answer 1

Полезная информация об этой проблеме:

Решение Codemonkey работает, потому что, помещая изображения в скрытый div, браузер должен хранить эти изображения в памяти и быть готовым к возможным изменениям видимости div. Если пользователю нужно изменить видимость div с скрытого на блокированный, это нужно сделать мгновенно. Вот почему просто загрузить все изображения в массив не работает должным образом.

Answer 2

Я нашел способ решить свою проблему.Сейчас я проверил это в трех браузерах на двух разных компьютерах с отличными результатами.Короче говоря, в моей функции предварительной загрузки изображений в javascript я добавил каждое из изображений в DOM в невидимом теге Div.

$('#img_preload').append($('<img />').attr('src', img.src));

Изображения, которые теперь добавляются в Dom при загрузке страницы, и в соответствии смоя теория опирается на память о моих недорогих компьютерах, они появляются мгновенно, когда они нужны моей CMS.

Спасибо за ваши комментарии:)

Answer 3

Вы также можете просто предварительно загрузить их в массив.Ваша проблема может быть вызвана так называемой «сборкой мусора».Именно здесь браузер ищет объекты, которые занимают память, у которых больше нет экземпляра на экране и на которые больше ничего не ссылается в памяти.

Если вы предварительно загружаете изображения в свой веб-век, они должны бытьзагружен в кеш, правда.Таким образом, они все еще должны появиться снова при повторном обращении.Однако изображения могут также исчезать, если срок действия кэша не установлен на достаточно длительный период времени для этих типов файлов.

Ваша проблема также может быть связана с браузером .... Я обнаружил, что этоВсегда лучше создать «якорь» для предварительно загруженного содержимого, поместив его в массив изображений и затем используя массив для вызова изображений при необходимости вместо URL-адреса изображения (URI).

ВотБыстрая и грязная статья, которая охватывает эту тему.

https://web.archive.org/web/1/http://articles.techrepublic%2ecom%2ecom/5100-10878_11-5214317.html

Answer 4

Поток пользовательского интерфейса может одновременно управлять только одной задачей - он будет выполнять javascript или обновлять пользовательский интерфейс. Если перед кодом, который предварительно загружает изображение, выполняется много разборов JavaScript, это может быть причиной задержки.

Еще одно предложение - отключить возможность нажатия на ссылку для входа в систему до тех пор, пока изображение не будет обнаружено на странице.

Сделать это довольно просто:
функция disableBtn (el) {
var btn = document.getElementById (el);
var btnId = btn.id;
btn.disabled = true;
}

Для повторного включения установите btn.disabled = false (после обнаружения, что ваше изображение было добавлено в DOM).