Question

我正在使用LightGallery来展示我的投资组合和同位素来过滤类别。由于我的图像质量很高，我正在尝试使用ImageLoaded 但还是无法实现，还在学习jQuery。我希望ImageLoaded在显示预加载器（css或gif）的同时在后台加载图像，当它完成加载时，像放大一样进入图像。我的Codepen

    $(document).ready(function() {
        var $gallery = $('#gallery');
        var $boxes = $('.revGallery-anchor');
        $boxes.hide(); 

        $gallery.imagesLoaded( function() {
        $boxes.fadeIn();

            $gallery.isotope({
                // options
                sortBy : 'original-order',
                layoutMode: 'fitRows',
                itemSelector: '.revGallery-anchor',
                stagger: 30,
                masonry: {
                  columnWidth: 200
                }
            });
        }); 

        $('button').on( 'click', function() {
            var filterValue = $(this).attr('data-filter');
            $('#gallery').isotope({ filter: filterValue });
            $gallery.data('lightGallery').destroy(true);
            $gallery.lightGallery({
                selector: filterValue.replace('*','')
            });
        });
  });

这是我正在尝试使用的代码。它尚未完成，但我陷入困境，不知道下一步。它也没有动画。

请帮助，谢谢。

Answer 1

你丢失了$.lightGallery()的初始化，所以添加了。添加了一个在同位素运行后淡出的预加载器。我还隐藏#gallery与opacity: 0;并在同位素完成加载时逐渐消失。写一些会缩放＆＃34;缩放＆＃34;你的图像会有些棘手，所以我会把它留给你。 http://codepen.io/anon/pen/pRwEXg

Lightgallery之前的预加载器，使用Imageloaded的同位素

1 个答案: