تحميل كسول + النظائر

Question

لقد أمضيت وقتًا طويلاً في محاولة جعل النظائر والتحميل البطيء يعملان معًا.

المشكلة:يعمل التحميل البطيء إذا قام المستخدم بالتمرير لأسفل، ولكن إذا استخدم المستخدم المرشحات، فستظهر العناصر في الأعلى ولكن لن يتم تحميل الصور.

هنا شخص لديه نفس المشكلة، ولكن يبدو أنه قام بإصلاحها.لقد جربت العديد من الأشياء ولكني ما زلت غير قادر على تشغيلها.

هنا المناقشة https://github.com/tuupola/jquery_lazyload/issues/51

شكرا جزيلا لمساعدتكم

الكود الذي أستخدمه هو كما يلي.

jQuery(document).ready(function($) {
    $('#big_container .media_block img').each(function(index) {
        var item_height = $(this).attr("height");
        $(this).parent().parent().css("height",item_height);
    });
    $('#big_container').isotope({
    itemSelector : '.item',
    layoutMode : 'masonry',
    masonry: {
        columnWidth: 5,
    },
    sortBy : 'date',
    sortAscending : false,
    getSortData : {
        date : function ( $elem ) {
            return $elem.find('.date').text(); // Date format should be [Y-m-d H:i]
        },
        views : function( $elem ) {
            return parseInt( $elem.attr('data-views'), 10 );
          },
        //featured : function ( $elem ) {
        // return $elem.attr('data-featured');
        //  },
        rates : function( $elem ) {
            return parseInt( $elem.attr('data-rates'), 10 );
          },
        comments : function( $elem ) {
            return parseInt( $elem.attr('data-comments'), 10 );
          }
    }

    });

    $('#sort-by li a').click(function(){
        var $this = $(this);
        if ($(this).parent().hasClass('selected') ) {
          return false;
        }
        var $optionSet = $this.parents();
        $optionSet.find('.selected').removeClass('selected');
           $this.addClass('selected');
          var sortName = $(this).attr('href').slice(1);
          $('#big_container').isotope({ sortBy : sortName });
          return false;
    });
});

Answer 1

للحصول على فرز/تصفية النظائر للعمل مع Lazyload، عليك القيام بما يلي.

jQuery(document).ready(function($) {
    var $win = $(window),
        $con = $('#container'),
        $imgs = $("img.lazy");

    $con.isotope();

    $con.on('layoutComplete', function(){
        $win.trigger("scroll");
    });

    $imgs.lazyload({
        failure_limit: Math.max($imgs.length - 1, 0)
    });
});

توضيح

وفقا للمستندات ( http://www.appelsiini.net/projects/lazyload )

بعد التمرير الصفحة حلقات تحميل كسول على الرغم من الصور التي تم تفريغها.في الحلقة يتحقق مما إذا كانت الصورة أصبحت مرئية.افتراضيًا، يتم إيقاف الحلقة عند العثور على الصورة الأولى أسفل الطية (غير مرئية).ويستند هذا على الافتراض التالي.ترتيب الصور على الصفحة هو نفس ترتيب الصور في كود HTML.مع افتراض بعض التخطيطات، قد يكون هذا خطأ.

من خلال قائمة النظائر التي تم فرزها/تصفيتها، يختلف ترتيب الصفحات بالتأكيد عن تنسيق HTML، لذا نحتاج إلى تعديل إعداداتنا. failure_limit.

كما ترون، نقوم بتخزين كائن jQuery حتى نتمكن من استخدامه length-1 كما فشلنا_الحد.إذا كنت فضوليًا لمعرفة سبب ذلك length-1, ، وذلك بسبب التحقق التالي من طريقة تحديث Lazyload.

if (++counter > settings.failure_limit) {
    return false;
}

تحميل كسول على الأحداث الأخرى

إذا لم تكن تقوم بتشغيل التحميلات البطيئة عند التمرير، فستحتاج إلى تبديل مشغل "التمرير" لأي حدث تستخدمه.

تجريبي

http://jsfiddle.net/arthurc/ZnEhn/

كود لموقعك

لقد قمت بتخزين بعض كائنات jQuery في متغيرات حيث يلزم إعادة استخدامها.

jQuery(document).ready(function($) {
    var $window = $(window);
    var $images = $('#big_container .media_block img');
    var $big_container = $('#big_container');

    $images.each(function(index) {
        var item_height = $(this).attr("height");
        $(this).parent().parent().css("height",item_height);
    });


    $big_container.isotope({
        itemSelector : '.item',
        layoutMode : 'masonry',
        masonry: {
            columnWidth: 5,
        },
        sortBy : 'date',
        sortAscending : false,
        getSortData : {
            date : function ( $elem ) {
                return $elem.find('.date').text(); // Date format should be [Y-m-d H:i]
            },
            views : function( $elem ) {
                return parseInt( $elem.attr('data-views'), 10 );
              },
            //featured : function ( $elem ) {
            // return $elem.attr('data-featured');
            //  },
            rates : function( $elem ) {
                return parseInt( $elem.attr('data-rates'), 10 );
              },
            comments : function( $elem ) {
                return parseInt( $elem.attr('data-comments'), 10 );
              }
        }

    });


    $big_container.on('layoutComplete', function(){
        $win.trigger("scroll");
    });

    $('#sort-by li a').click(function(){
        var $this = $(this);
        if ($(this).parent().hasClass('selected') ) {
          return false;
        }
        var $optionSet = $this.parents();
        $optionSet.find('.selected').removeClass('selected');
           $this.addClass('selected');
          var sortName = $(this).attr('href').slice(1);
          $big_container.isotope({ sortBy : sortName });
          return false;
    });


    $images.lazyload({
        failure_limit : Math.max($images.length-1, 0);
    })
});