预加载器在Lightgallery之前，同位素使用Imageloaded [英] Preloader before Lightgallery, isotope using Imageloaded

问题描述

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

I'm using LightGallery to showcase my portfolio and isotope to filter the categories. As my images are in high quality I'm trying to use ImageLoaded but not able to achieve, still learning jQuery. I want the ImageLoaded to load the images in the background while a preloader(css or gif) is displayed and when its done loading give an entrance to the image like a zoom-in. My 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('*','')
            });
        });
  });

这是我想使用的代码。它还没有完成，但我被卡住了，不知道下一步。也不是动画。

This is the code I'm trying to work with. Its not yet complete, but I'm stuck and don't know the next step. Also its not animating.

请帮助，谢谢。

推荐答案

$。lightGallery（）这样添加。添加了一个预加载器，我在同位素运行后淡出。我也隐藏 #gallery with opacity：0; 和淡入时，同位素加载完成。写一些会放大你的图像的东西会有些棘手，所以我会离开你。 http://codepen.io/anon/pen/pRwEXg

You lost the initialization of $.lightGallery() so added that. Added a preloader that I fade out after isotope runs. I'm also hiding #gallery with opacity: 0; and fading that in when isotope is done loading. Writing something that would "zoom" your images in would be somewhat tricky so I'll leave that up to you. http://codepen.io/anon/pen/pRwEXg

这篇关于预加载器在Lightgallery之前，同位素使用Imageloaded的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！