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

【问题标题】：Preloader before Lightgallery, isotope using ImageloadedLightgallery之前的预加载器，同位素使用Imageloaded
【发布时间】：2017-01-23 15:59:49
【问题描述】：

我正在使用 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('*','')
            });
        });
  });

这是我正在尝试使用的代码。它尚未完成，但我被卡住了，不知道下一步。它也没有动画。

请帮忙，谢谢。

【问题讨论】：

标签： jquery html css jquery-isotope lightgallery

【解决方案1】：

你丢失了$.lightGallery() 的初始化，所以添加了那个。添加了一个预加载器，我在同位素运行后淡出。我还用opacity: 0; 隐藏#gallery，并在同位素加载完成时淡化它。写一些可以“放大”你的图像的东西会有点棘手，所以我会把它留给你。 http://codepen.io/anon/pen/pRwEXg

【讨论】：

嗨 Micheal，它在托管时无法正常工作。 Site 加载器在加载图像时可见，或者只有加载器出现，图像根本不会出现。检查上述网站。它与我在问题中的 codepen 相同
@Kamalakannan codepen 和您的个人网站之间显然有些不一样，但我也不打算对您的个人网站进行故障排除。我已经在第三方网站 (codepen) 上为您提供了很多帮助，因此不建议这样做，希望您能接受我已经为您完成的工作并找出您的个人网站。
是的，我知道我要求更多 :(。我很抱歉。无论如何，谢谢 Micheal。
@Kamalakannan 没问题，但看起来你在 cmets 中向我寻求个人帮助，只是发布了一个指向你网站的链接，希望我能进去为你解决所有问题。这只对你有用——它根本对 SO 社区没有帮助。请记住，SO 不是在这里为您完成您的个人项目。如果您有任何疑问，请发表一篇文章，清楚地显示特定问题，并使用复制问题所需的清晰代码。 stackoverflow.com/help/how-to-ask