Как мне задержать отображение html текста до загрузки спрайта фонового изображения?

Question

Вот пример кода, которым я хочу управлять с помощью jQuery (белая кнопка bg на черной странице bg):

    <ul class="buttons">
        <li class="button-displays"><a href="/products/">Products and Services for the company</a></li>
        <li class="button-packaging"><a href="/packaging/">Successful packaging services for the company</a></li>
        <li class="button-tools"><a href="/tools/">Data, mail and print tools for your company</li>
    </ul>

В файле CSS у меня есть следующее:

    .buttons li { background-image: url(images/sprite.png); height:126px; width:293px; float:left; margin:0 0 0 9px; }
    .button-displays { background-position: 0 125px; }
    .button-packaging { background-position: 0 250px; }
    .button-tools { background-position: 0 375px; }

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

Моему клиенту не нравится это в Firefox и Safari, когда страница загружается дляв первый раз текст внутри якоря загружается первым, затем фоновый спрайт li (который составляет около 150 Кбайт / с, у меня всего 6 кнопок) загружается только тогда, когда спрайт полностью загружен.Фон внезапно появляется после нескольких секунд загрузки, оставляя текст в якоре до тех пор, пока фон не появится.

Я попытался поиграть со следующим кодом в надежде, что это задержит загрузку этой разметки.и CSS:

    $('.buttons li a').load(function() {
    });

и

    $(window).load(function() {
        $(.buttons);
    });

Я недостаточно разбираюсь в jQuery, чтобы знать, заставляет ли этот код ждать, пока все элементы загрузятся, прежде чем появиться.Я бы предпочел заставить элементы элемента списка в коде кнопок задерживать отображение на странице, пока спрайт bg img не будет полностью загружен.

Спасибо за вашу помощь и предложения!

Answer 1

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

Попробуйте вместо этого:

Сделать .button li элементов display:none:

.buttons li { display:none; background-image: url(images/sprite.png); height:126px; width:293px; float:left; margin:0 0 0 9px; }

Затем в вашем jQuery создайте изображение с URL-адресом вашего спрайта и прикрепите к нему обработчик load, который покажет кнопки.

$(function() {
      // create a dummy image
    var img = new Image();

      // give it a single load handler
    $(img).one('load',function() {
        $('.buttons li').fadeIn(); // fade in the elements when the image loads
    });

      // give it the src of your background image
    img.src = "images/sprite.png";

      // make sure if fires in case it was cached
    if( img.complete )
        $(img).load();
});

Answer 2

Я думаю, вы на правильном пути. Функция загрузки JQuery выполняется после того, как выбранный элемент полностью завершил загрузку - это означает, что весь контент загружен. Дело в том, что с вашим кодом разметка кнопок будет загружаться до загрузки контента. Таким образом, вы можете использовать jQuery, чтобы полностью раскрыть кнопки с событием загрузки. Итак, установите ваши кнопки, чтобы быть скрытыми в вашем CSS (видимость: скрыто). Затем используйте $ (document) .load (function () {}), чтобы открыть кнопки:

$(window).load(function(){
    $('.button').css({visibility: 'visible'});
})

Answer 3

Установите кнопки, которые будут изначально скрыты, затем выполните jquery , загрузите в li, так как это то, к чему применено фоновое изображение:

$('.buttons li').load(function() {
        $('.buttons').show();
    });

Answer 4

написать свой код внутри

$(document).ready(function(){

//your logic here 

});

это гарантирует, что ваши манипуляции с DOM начнутся после полной загрузки DOM ...

плюс вы также можете использовать

$("#yourDOMelementID").ready(function(){

});

чтобы убедиться, что предполагаемый элемент готов к манипулированию ...

больше, чтобы задержать обработчик события, который вы можете использовать .setTimeOut() или в некоторых случаях .delay()