JQuery, AJAX, загрузить, готов

$(function(){    
       $(document).ready(function() {  
    $('#demo_content').html('<img src="http://v.com/ajax-loader-1.gif"alt="Wait" />');

        $('#demo_content').load('http://vbizmarketing.com/myphp.php?nice=9176198');
        return false;
        cache:false

    });
});

Это творит чудеса, и я благодарен за то, что сообщество потоковых потоков помогло мне с первоначальной проблемой, но я пытался вызвать

$('#demo_content').html('ИЗОБРАЖЕНИЕ ЗДЕСЬ');

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

Любые предложения или советы высоко ценится.

Спасибо

Источник

3 ответа

Решение

Вы имеете в виду просто правило CSS для центрирования изображения?

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

Вы можете сделать это с помощью некоторых CSS и перезвонить на .load()

CSS:

#loading{
    text-align:center;
    display:none;
}

Разметка:

<div id="demo_content">
    <div id="loading">
        <img src="http://vbizmarketing.com/ajax-loader-1.gif"alt="Wait" />
    </div>
    <div id="content"></div>
</div>

Сценарий.

$(function() {
    $("#loading").show(); //show the loading div.

    $('#content').load('http://vbizmarketing.com/myphp.php?nice=9176198', function() {
        $("#loading").hide(); //use the callback function for the load method to hide the loading div
    });
});

Пример кода на jsfiddle.

Источник

Мне непонятно, с чем ты пытаешься справиться / у тебя проблемы. Но в таком сценарии я сделал следующее:

function loadImage()
{
    $('div#container')
        .html(  "<img class='spinner' src='" + ajax spinner path + "'/>"  )
        .fadeIn();

    var newImg = new Image();
    $(newImg)
        .load( function()
            {
                $('div#container')
                    .stop()
                    .css({
                        'opacity'   :'1.0'
                    })
                    .html(newImg);

                $(this)
                    .hide()
                    .fadeIn();
            }
         )
        .attr(  'src'   , ' new image path here ' )
        .error( function()
            {
                $('div#container')
                .html( "<img src='" + loadFailUrl+ "'/>" )
            }
        );
}

Итак - сначала добавьте контейнер div с.html. Это будет путь к загрузочной графике.

Вторая часть функции создает новый элемент Image, присоединяет событие загрузки и событие ошибки. Добавление src.attr определяет путь src и инициирует загрузку.

В событие загрузки включена анонимная функция обратного вызова, которая вызывает остановку текущей анимации fadeIn(), если она выполняется, и добавляет HTML-код к вновь созданному изображению (в то же время удаляя загрузочную графику).

Наконец, изображение получает последовательность fadeIn().

Есть только около 17 233 способов сделать это. Я успешно использовал это в прошлом...

ура!

Источник 
$("#div").ajaxStop(function(){  
    $(this).hide();  
});

Эта функция скрывает панель загрузки после загрузки контента. Спасибо за все советы.

Источник
Другие вопросы по тегам