Javascript асинхронно загружает фоновое изображение

Question

Возможно ли загрузить фоновое изображение асинхронно?

Я видел много jQuery плагинов для загрузки нормального изображения в асинхронном режиме, но я не могу найти, можно ли предварительно загрузить /асинхронно загружать фоновое изображение.

РЕДАКТИРОВАТЬ

Я проясняю свою проблему.Я работал над этим тестовым сайтом http://mentalfaps.com/ Фоновое изображение загружается случайным образом из набора изображений, обновляемых каждый час заданием хрон (который берет случайные изображения в каталоге flickr).

Хост свободен и медленен в данный момент, поэтому загрузка фонового изображения занимает некоторое время.

Положение первого оверлея (с логотипом PNG прозрачный mentalfaps) и ширина регулируются созданной функциейв jQuery(document).ready costruct.

Если вы попытаетесь обновить страницу много раз, ширина правого div-оверлея равна 0 (и вы видите «дыру» в макете)

Вот метод установки моих позиций:

function setPositions(){
    var oH = $('#overlay-header');
    var overlayHeaderOffset = oH.offset();
    var overlayRightWidth = $(window).width() - (overlayHeaderOffset.left + oH.width());
    if (overlayRightWidth >= 0) {
        $('#overlay-right').width(overlayRightWidth);
    } else {
        $('#overlay-right').width(0);
    }
    var lW =  $('#loader-wrapper');
    lW.offset({
        left: (overlayHeaderOffset.left + oH.width() - lW.width())
    });
}

Проблема в том, что $(window).width() меньше, чем эффективная ширина окна!так что проверка не проходит, и сценарий идет на $('#overlay-right').width(0);

какие-либо идеи?

Answer 1

Не уверен, правильно ли я понимаю ваш вопрос, но фоновые изображения (и все другие изображения) уже загружены асинхронно - браузер начнет отдельные запросы для них, как только встретит URL-адрес при анализе HTML.

См. Этот превосходный ответ для фона о порядке загрузки: Загрузка и последовательность выполнения веб-страницы?

Если вы имели в виду что-то еще, уточните.

Answer 2

Мне нравится использовать CSS для заливки фона цветом для загрузки страницы.

После события готовности DOM я использую jQuery, чтобы изменить CSS и добавить фоновое изображение.Таким образом, изображение не загружается до тех пор, пока страница не загрузится.Не уверен насчет асинхронности, но этот метод дает пользователю приличный опыт.

Пример: http://it.highpoint.edu/

Справочные навигационные ссылки имеют фоновое изображение.Страница инициализируется цветом фона.Он заменяется фоновым изображением после загрузки страницы через jQuery.

Answer 3

Вы можете использовать ссылку предварительной выборки в заголовке.

<link rel="prefetch" href="/images/background.jpg">

Вы сможете добавить эти ссылки в заголовок через JavaScript.

Answer 4

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

<script>
    var img = new Image();
    img.onload = function () {
        document.getElementsByTagName('body')[0].style.backgroundImage = 'background.png';
    };
    img.src = 'background.png';
</script>

Answer 5

изменений в этом файле jquery.ImageOverlay.js

установите свой рост и ширину и наслаждайтесь этим ...

imageContainer.css({
            width : "299px",
            height : "138px",
            borderColor : hrefOpts.border_color
        });

Answer 6

Я нашел ответ сам, это была проблема из-за метода .offset(), который иногда давал неправильные значения.

У меня были значения записи с использованием .position():

 var overlayHeaderOffset = oH.position();

Answer 7

Как уже упоминалось, фоновое изображение загружается асинхронно.Если вам нужно загрузить фоновое изображение из кода JQuery, вы также можете установить метод addClass () для установки класса CSS или атрибута ("style = \" background-image: url ('myimage.png') \ "")