lazyload и masonry — разница между firefox и webkit

Я пытаюсь заставить работать кладку и ленивую загрузку вместе на отзывчивом веб-сайте, где блок для кладки указан в%. Я прочитал все остальные сообщения на эту тему, включая этот конкретный: Объединение LazyLoad и Jquery Masonry

Я применил первый метод из этого поста (за исключением того, что мне нужно изменить строку «перезагрузка», потому что она не работает на моем веб-сайте. Не знаю почему.) Второй метод тоже выглядит великолепно; но мне это кажется сложным. Я не знаю, как передать размер изображения с сервера...

Итак, наконец, я получил этот результат: http://test.cas-p.net/-Pipolass-

с этим кодом:

$(document).ready(function(){
//-----------------------------------XX--SCRIPT masonry--XX 
    var $container = $('.masonry');
    container.imagesLoaded(function(){
         //first masonry call on placeholder images
        $container.masonry({
          transitionDuration: 0,
          itemSelector: 'article.bloc',
          columnWidth: 'article.w1'
        });
        //------XX-- lazyload --XX
            //load images who appears on the screen after masonry effect
        $('article.bloc img').addClass('not-loaded');
        $('img.not-loaded').lazyload({
              effect: 'fadeIn', 
              threshold : 900,
              load: function() {
                       // Disable trigger on this image
                       $(this).removeClass("not-loaded");
                      //reload masonry with real images size
                       $container.masonry({
                            transitionDuration: 0,
                            itemSelector: 'article.bloc',
                            columnWidth: 'article.w1'
                       });
              }
        });
        $('img.not-loaded').trigger('scroll');
     });
//-----------------
});

Похоже, он отлично работает в Firefox. Но в хроме и сафари у меня возникли проблемы:

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

И стоит, в сафари раз на два, все картинки перекрываются, пока вниз не проскроллишь. (Означает второй вызов кладки, не работает, пока я не прокручу вниз.)

У кого-нибудь есть идея, как заставить его работать лучше на сафари и хроме?

(сейчас я не пробую IE... но мне страшно ^^..)

Большое спасибо за помощь, и извините за мой плохой английский.


javascript google-chrome safari lazy-loading masonry
person casp    schedule 12.06.2014    source источник
comment
После размышлений я предполагаю, что моя проблема связана с высотой img: auto; Но до сих пор нет решения...   -  person casp    schedule 13.06.2014

Ответы (1)


arrow_upward
0
arrow_downward

ОК, я нашел способ решения. Проблема возникла из-за моего адаптивного макета, который использовал height:auto;

Я нашел это сообщение: CSS: проблема автоматической высоты в адаптивном макете

Теперь я использую этот код:

   //-----------------------------------XX--SCRIPT masonry--XX  

//Images still not loaded
$('article.bloc img').addClass('not-loaded');

function resizeBlankImages() {
        $('img.not-loaded').each(function () {
        var originalWidth = $(this).attr('width');
        var originalHeight = $(this).attr('height');
        var ratioH = originalWidth/originalHeight;
        var width = $(this).width();
        var height = width/ratioH;
        $(this).height(height);
    });
}

var $container = $('.masonry');
$container.imagesLoaded(function(){
    //change image height
    resizeBlankImages();
    //initialize masonry
    $container.masonry({
        transitionDuration: 0,
        itemSelector: 'article.bloc',
        columnWidth: 'article.w1'
    });
    //------XX-- lazyload --XX
    $('img.not-loaded').lazyload({
        effect: 'fadeIn', 
        threshold : 900,
        load: function() {
            $(this).removeClass("not-loaded");
                    //make image height auto again
        $(this).css('height', 'auto')
        }
    });
    $('img.not-loaded').trigger('scroll');

});

Теперь он отлично работает в любом браузере :-)

person casp    schedule 14.06.2014