Отстающий образ jquery preloader - PullRequest
Новая
       17

Отстающий образ jquery preloader

0 голосов
/ 27 октября 2011

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

Вот jquery; 

$(function() {
    $("li#tabs.popup a").click(function(e) {
        $("#popup").slideDown().addClass('active');
        $('#popup').html('<center><img src="images/loader.gif" /></center>');
        $('#popup').load('wishlist.php');
        $('li#tabs.popup a').removeClass('selected');
        $(this).addClass('selected');
        e.stopPropagation();
    });
});

После долгих волнений я нашел ответ на вопрос. По какой-то причине размещение загрузчика над всеми другими функциями приведет к его плавной загрузке и немедленному нажатию.

Так что вместо кода выше я сделал 

$(function() {
    $("li#tabs.popup a").click(function(e) {
        $('#popup').html('<center><img src="images/loader.gif" /></center>');
        $("#popup").slideDown().addClass('active');
        $('#popup').load('wishlist.php');
        $('li#tabs.popup a').removeClass('selected');
        $(this).addClass('selected');
        e.stopPropagation();
    });
});

теперь работает просто отлично!

Ответы [ 2 ]

1 голос
/ 27 октября 2011

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

Мы использовали этот скрипт в прошлом, чтобы гарантировать, что всессылки на изображения в нашем CSS предварительно загружены.Затем я бы изменил вашу анимацию «предварительной загрузки», чтобы использовать css (вы можете установить фоновое изображение для вашего анимированного GIF-файла), а не создавать тег изображения на лету.

0 голосов
/ 27 октября 2011

Я полагаю, это происходит потому, что, когда вы начинаете отображать изображение в виде HTML-контента, оно загружается, а затем отображается. Вы уже можете загрузить его на свою страницу, например: 

<div id="popup">
    <div id="spinner"> <!-- Assuming that it has display: none in CSS -->
        <center><img src="images/loader.gif" alt="Loading..." /></center>
    </div>

    <!-- Load the content here. -->
</div>

И ваш сценарий будет выглядеть как 

$(function() {
    $("li#tabs.popup a").click(function(e) {
        $('#popup').find('#spinner')
                   .show()
                   .end()
                   .load('wishlist.php')
                   .slideDown()
                   .addClass('active');

        $('li#tabs.popup a').removeClass('selected');
        $(this).addClass('selected');

        e.stopPropagation();
    });
});

Sidenote: И вам действительно не нужно писать $('li#tabs'), просто $('#tabs') (или, точнее, $('.tabs') будет делать. Когда вы устанавливаете селектор на li#tabs, это вызывает Sizzle отфильтровать результат document.getElementById('tabs'), чтобы увидеть, является ли тэг соответствующего элемента li.

...