JQuery, AJAX, загрузить, готов - PullRequest
Новая
       4

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

0 голосов
/ 22 марта 2011 
$(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 ('IMAGE HERE');

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

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

Спасибо

Ответы [ 3 ]

2 голосов
/ 22 марта 2011

Вы имеете в виду просто правило 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 .

1 голос
/ 22 марта 2011

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

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 способа сделать это.Я успешно использовал это в прошлом ...

ура!

0 голосов
/ 22 марта 2011 
$("#div").ajaxStop(function(){  
    $(this).hide();  
});

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

...