Изменения форматирования в Jquery после обновления ajax - PullRequest
0 голосов
/ 04 мая 2011

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

Все работает отлично, за исключением случаев, когда изображения загружаются через ajax, они, кажется, получают дополнительные значения полей / отступов из ниоткуда и не помещаются плавно, как изображения, уже находящиеся на странице. Я пытался добавить margin:0; padding:0;, но, похоже, ничего не работает

Весь мой код сейчас здесь: http://1hype.me/

Любые идеи очень ценятся!

EDIT:

Проблема возникает на всем, что я тестировал, Safari, Chrome & FF (mac)

Вот скриншот, который объясняет это немного подробнее: http://cl.ly/0d0q37290W1r0j0X2g0c

1 Ответ

2 голосов
/ 04 мая 2011

Это связано с пробелами.

Вы можете просто вернуть изображение из вызова ajax ( без какого-либо сценария )

и просто запустить

function fetch() {
    //autoupdater
    $.ajax({
        type: "POST",
        url: "ajax/fetch_image.php",
        cache: false,
        data: "after=000000",
        success: function(results){ 
            var imgHolder = $('#image_holder');
            /* prepend the results 
             results is just the image (without whitespace around it) */
            imgHolder.prepend(results);
            /* fade in the first image (the one we just prepended)*/
            imgHolder.find('img:first').fadeIn(1100);
            /* do the masonry thing.. */
            imgHolder.masonry({ singleMode: true });
        }
    });
}

если это не вариант ( изменение fetch_image.php ), тогда вы можете использовать

function fetch() {
    //autoupdater
    $.ajax({
        type: "POST",
        url: "ajax/fetch_image.php",
        cache: false,
        data: "after=000000",
        success: function(results){ 
            var imgHolder = $('#image_holder');
            /* exclude text whitespace nodes (not included in a tag).*/
                        var $results = $(results).filter(function(){return this.nodeType != 3});
            imgHolder.prepend( $results.eq(0) );
            $('body').append( $results.eq(1) );
        }
    });
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...