Javascript 即使在加载所有图像之前，也要使lightbox工作

我把它用作我的灯箱，我的问题是，我的页面上有很多图像（缩略图）要加载，当它加载时，我点击其中一个加载的图像，灯箱就不工作了。因此，它将转到另一页上的jpeg文件，而不是模式窗口

即使所有图像都已加载，我如何制作我的lightbox。顺便说一下，我把这个放在我的WordPress上，但我不想使用插件。我也在使用FoundationPress

这是我用来启动灯箱的代码

$(document).ready(function(){
  $('a.gallery').featherlight({
    targetAttr: 'href'
  });
});

我有图像加载脚本，但我在我的砖石上使用它。如何将lightbox脚本放入已加载图像的插件中

(function() {

// Main content container
var $container = $('.grid');

var $grid = $('.grid').masonry({
  // options
  columnWidth: '.grid-sizer',
  itemSelector: '.grid-item',
  percentPosition: true

});

// layout Masonry after each image loads
$grid.imagesLoaded().progress( function() {
  $grid.masonry('layout');
});

// Infinite Scroll
$container.infinitescroll({

    navSelector  : '.pagination',    // selector for the paged navigation 
    nextSelector : '.pagination a.next',  // selector for the NEXT link (to page 2)
    itemSelector : '.grid-item',     // selector for all items you'll retrieve
    loading: {
            msg: null,
            msgText: '<i class="fa fa-circle-o-notch fa-spin"></i>',
            finishedMsg: '<i class="fa fa-check"></i>',
            img: null
      }
    },


    // Trigger Masonry as a callback
    function( newElements ) {
        // hide new items while they are loading
        var $newElems = $( newElements ).css({ opacity: 0 });
        // ensure that images load before adding to masonry layout
        $newElems.imagesLoaded(function(){
            // show elems now they're ready
            $newElems.animate({ opacity: 1 });
            $container.masonry( 'appended', $newElems, true );
        });

});

})();

（函数（）{
//主内容容器
var$container=$（'.grid'）；
变量$grid=$（'.grid'）。砌体({
//选择权
columnWidth:“.grid sizer”，
itemSelector:“.grid项”，
位置：正确
});
//在每个图像加载后布局砌体
$grid.imagesLoaded（）.progress（函数（））{
$grid.mashine（“布局”）；
});
//无限卷轴
$container.infinites卷({
导航选择器：'.pagination'，//分页导航的选择器
下一个选择器：'.pagination a.next'，//下一个链接（到第2页）的选择器
itemSelector:'.grid item'，//将检索的所有项目的选择器
装载：{
msg:null，
msgText:“”，
finishedMsg:“”，
img:null
}
},
//触发器作为回调
函数（新元素）{
//在加载新项目时隐藏它们
var$newElems=$（newElements）.css（{opacity:0}）；
//确保在添加到砌体布局之前加载图像
$newElems.imagesLoaded（函数（）{
//显示元素现在他们准备好了
$newElems.animate（{opacity:1}）；
$container.mashing（'added'，$newElems，true）；
});
});
})();

我不确定我是否正确理解了您想要的解决方案，但您可以使用

这是专门为像砖石插件布局这样的用例设计的， 检查所有图像是否已完成加载，然后执行函数/其他脚本

例如：

$('#your-container').imagesLoaded( {
  },
  function() {
    $('a.gallery').featherlight({
      targetAttr: 'href'
    });
  }
);

---

希望这能有所帮助？

你能再多看一些代码吗？事实上，就这些。我有其他代码，但与灯箱无关。例如，我有masonrly插件和图像加载插件，但我在不同的页面上使用它。但是它们在一个scripts.js中。这有帮助吗？如果它不工作，可能会出现JavaScript错误。你在你的网络浏览器中检查控制台了吗？实际上它是工作的，但是在所有图像加载之后。我有这么多的缩略图。加载所有缩略图后，它就可以工作了。但在加载所有图像之前，它不会。这里是链接。在加载所有图像之前，单击页面底部的图像，您将了解我的意思。另外，请不要环顾该网站，因为它目前正在维护：）我会试试这个。我想做的是能够点击缩略图和灯箱将工作，甚至在所有的图像加载。问题是，我认为，它是在脚本之前先加载图像，因此，在图像全部加载之前没有脚本。这样灯箱就坏了。这是我的页面，顺便说一句，我有一个用于砌石的imagesloaded脚本。我怎样才能把它整合到我的灯箱里？我更新了上面的脚本。不，这是正确的顺序：让图像加载，然后最后启动脚本。脚本始终位于底部。有了无限卷轴和灯箱，我需要回到你身边。现在一切都好了吗？似乎是这样。还有什么不适合你？不，还是不适合。未加载图像时，图像仍会转到新页面，而不是lightbox。你试过匿名模式吗？可能您的浏览器已经缓存了所有图像，并且在您单击图像时已经加载了这些图像。我知道我的页面上有很多图片。如果我使用lazy-loader，这对我有帮助吗？我只是想解开这个谜。肯定有解决办法。