Почему изображение предварительно загружает неэффективный?
Мой проект CMS имеет стильный экран входа в систему web 2.0, который исчезает по экрану с помощью JavaScript. Каким образом, что даже при том, что я сделал 120% уверенными, что изображения предварительно загружены (я использовал монитор ресурсов в средствах разработки) они все еще занимают секунду для разоблачения, когда мой экран входа в систему появляется. Это полностью уничтожает причудливость! Смотрите:
http://www.dahwan.info/Melior (связываются поврежденный),
При нажатии на вход в систему экран, как предполагается, исчезает к темному использованию 75% альфы 1 пкс png изображение. Даже при том, что изображение предварительно загружено, оно не обнаруживается, пока анимация не сделана. Однако, если Вы нажимаете отмену и входите в систему снова, анимация течет гладко и отлично.
Кто-либо может думать о решении этой проблемы? У меня есть он с остальной частью GUI моего CMS также. Это похоже не было никакого изображения, предварительно загружающего что так когда-либо.
Спасибо за ответы
Править: А-ч да, я в настоящее время разрабатываю этот CMS для Google Chrome 5.0.375.99, добавив много совместимость браузера позже. Извините за пропуск этого
4 ответа
Я нашел способ решения моей проблемы. Теперь я протестировал это в трех браузерах на двух разных компьютерах и дал отличные результаты. Короче говоря, в моей функции предварительной загрузки изображений в javascript я добавил каждое из изображений в DOM в невидимом теге Div.
$('#img_preload').append($('<img />').attr('src', img.src));
Изображения, которые теперь добавляются в Dom при загрузке страницы и, согласно моей теории, хранятся в памяти моих младших компьютеров, они появляются мгновенно, когда они нужны моей CMS.
Спасибо за ваши комментарии :)
Вы также можете просто предварительно загрузить их в массив. Ваша проблема может быть вызвана тем, что известно как "сборка мусора". Это когда браузер ищет объекты, потребляющие память, у которых больше нет экземпляра на экране и на которые больше ничего не ссылается в памяти.
Если вы предварительно загружаете изображения в свой web age, они должны быть загружены в кэш. Поэтому при повторном обращении к ним они должны появиться снова. Однако изображения также могут исчезнуть, если срок действия кэша не установлен на достаточно длительный период времени для файлов такого типа.
Ваша проблема также может быть связана с конкретным браузером..... Я обнаружил, что всегда лучше создавать "якорь" для предварительно загруженного содержимого, помещая их в массив изображений, а затем использовать массив для вызова изображений, когда это необходимо, вместо URL(URI) изображения.
Вот небольшая статья на эту тему.
https://web.archive.org/web/1/http://articles.techrepublic%2ecom%2ecom/5100-10878_11-5214317.html
Полезная информация об этой проблеме:
Решение Codemonkey работает, потому что, помещая изображения в скрытый блок div, браузер должен сохранять эти изображения в памяти и быть готовым к возможному изменению видимость div. Если пользователю нужно изменить видимость div со скрытого на блокировку, это нужно сделать немедленно. Вот почему просто загрузка всех изображений в массив не работает должным образом.
Поток пользовательского интерфейса может одновременно выполнять только одну задачу - он либо выполняет javascript, либо обновляет пользовательский интерфейс. Если перед кодом, который предварительно загружает изображение, происходит много разбора/выполнения javascript, это может быть причиной задержки.
Еще одно предложение - отключить возможность клика на ссылке входа в систему до тех пор, пока изображение не будет обнаружено на странице.
Сделать это достаточно просто:
function disableBtn(el){
var btn = document.getElementById(el);
var btnId = btn.id;
btn.disabled = true;
}
Для повторного включения установите btn.disabled = false (после обнаружения того, что ваше изображение было добавлено в DOM).