jQuery Masonry и Ajax-выборка для добавления элементов, вызывающих перекрытие изображений

Еще одна проблема с наложением изображений - использование масонства и Ajax для добавления элементов в Wordpress. При добавлении новых элементов изображения перекрываются. Однако при перезагрузке страницы изображения больше не перекрываются. После некоторых исследований я понимаю, что это связано с вычислением высоты изображений.

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

Однако это то, где я застрял. Из-за моего ограниченного знания PHP, я понятия не имею, как использовать эту функцию или где разместить ее в своем коде, поэтому я ищу небольшое направление здесь. Может ли кто-нибудь помочь мне понять, как интегрировать функцию getimagesize в мой код?

Вот код кладки:

$(document).ready(function(){

    var $container = $('#loops_wrapper');

    $container.imagesLoaded( function(){
      $container.masonry({
        itemSelector : '.post_box',
        columnWidth: 302

        });
      });
    });

Это код извлечения AJAX:

$('.load_more_cont a').live('click', function(e) {
    e.preventDefault();
    $(this).addClass('loading').text('Loading...');
    $.ajax({
        type: "GET",
        url: $(this).attr('href') + '#loops_wrapper',
        dataType: "html",
        success: function(out) {
            result = $(out).find('.post_box');
            nextlink = $(out).find('.load_more_cont a').attr('href');

            $('#loops_wrapper').append(result).masonry('appended', result);
            $('.load_more_cont a').removeClass('loading').text('Load more posts');

            if (nextlink != undefined) {
                $('.load_more_cont a').attr('href', nextlink);
            } else {
                $('.load_more_cont').remove();
            }
        }
    });
});
4 голоса | спросил Anne Boleyn 23 PM00000050000005331 2012, 17:58:53

1 ответ


0

Вы можете попытаться реализовать подход таймера Дэвида ДеСандро для добавления изображений ...

"Как рекомендуется в учебнике, лучшее решение для работы с изображениями - иметь атрибуты размера, определенные в теге img, особенно при использовании Infinite Scroll. Это решение используется в приведенном ниже примере.

Конечно, это не приемлемый вариант в некоторых CMS, особенно в Tumblr. В этой ситуации Masonry необходимо вызвать после полной загрузки только что добавленных изображений. Это делается путем задержки обратного вызова масонства. "

function( newElements ) {
    setTimeout(function() {
    $wall.masonry({ appendedContent: $(newElements) });
    }, 1000);
}

РЕДАКТИРОВАТЬ : если вы не можете реализовать общую идею задержки для добавления элементов с бесконечной прокруткой, вы можете попробовать перезагрузить их после добавления новых элементов, вместо

$('#loops_wrapper').append(result).masonry('appended', result);

делай так

$("#loops_wrapper").append(result).masonry('reload');
ответил Systembolaget 23 PM00000060000004631 2012, 18:13:46

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132