Предварительная загрузка фоновых изображений в jQuery

#jquery #preload

#jquery #предварительная загрузка

Вопрос:

У меня возникли проблемы с предварительной загрузкой фоновых изображений. Это моя попытка, но, похоже, все еще не работает — ie. при вызове showAjaxLoader («#mytarget») изображение по-прежнему отображается с задержкой. У кого-нибудь есть какие-либо предложения?

CSS:

 div.entryform-ajax-loader {
    background-image:url(../images/preloader-entry-form.gif);
}

Скрипт:

 var ajax_loader = $('<div />').attr('class', 'entryform-ajax-loader');

function showAjaxLoader(target)
{
    $(target).append(ajax_loader);
}

function hideAjaxLoader(target)
{
    ajax_loader.remove();

1. почему это не работает? Это выдает ошибку javascript или это просто не предварительная загрузка изображения?

2. Извините, я должен был объяснить лучше, пожалуйста, посмотрите мой вопрос еще раз, я отредактировал его…..

3. Не вижу никакой проблемы, кроме закрытия «}» для функции hideAjaxLoader (целевой)

4. Это действительно будет проблемой только при первой загрузке. Затем при каждой последующей загрузке / использовании он будет извлекать их из локального кэша. Если это не большой файл, то на самом деле это не такая уж большая проблема.

Ответ №1:

Добавьте в свой head div, в котором в качестве вашего изображения указан исходный код, в этом случае изображение будет загружено до фактической загрузки страницы.

 <div style="display:none">
<img src="../images/preloader-entry-form.gif">
</div>

1. Заставит ли это изображение загружаться дважды, если я использую одно и то же изображение позже на странице?? Повлияет ли это на производительность страницы? или изображение загружается только один раз, а затем используется из памяти браузера и так далее?

Ответ №2:

 <div style="display:none">
<img src="../images/preloader-entry-form.gif">
</div>

В начале текста страницы или, если вам нужно решение на jQuery

 http://engineeredweb.com/blog/09/12/preloading-images-jquery-and-javascript

Ответ №3:

В качестве альтернативного решения вы можете добавить этот скрипт в свой файл,

 $(function() {
$(document.body).append($("<img />").attr("src", "../images/preloader-entry-form.gif").hide())
});

которая загрузит изображение в начале загрузки страницы. В результате, когда функция showAjaxLoader будет выполнена, изображение будет загружено без каких-либо задержек.