如何仅在所有 html5 视频加载无限滚动后才运行砌体？

Question

masonry 无限滚动附加 html5 视频重叠

我目前正在使用 imagesLoaded 库来检查图像是否已加载然后调用 masonry。

但它不适用于 html5 视频标签，因为这些视频彼此重叠。

所以我将调用 masonry 从 document.ready 更改为 window.load 并在初始加载时删除了对 imagesLoaded 的调用，即来自这个

$(document).ready(function(){

    var $container = $('#media');
    // layout Masonry again after all images have loaded
    $container.imagesLoaded( function() {

      $container.masonry({
          "columnWidth": "." + "col-sm-2",
          itemSelector: '.item',
          gutter: 0,
        });
      $('.item').css('opacity', '1.0');
    });

});

至此

$(window).load(function(){
        var $container = $('#media');

          $container.masonry({
              "columnWidth": "." + "col-sm-2",
              itemSelector: '.item',
              gutter: 0,
            });
          $('.item').css('opacity', '1.0');
});

现在 masonry 中的 html5 videos 没有重叠，并且在页面第一次加载时完美呈现，即 initial load，但由于我也在使用 infinite-scroll，它会在向下滚动页面时添加更多 images/videos，因此当新视频被添加到容器时，它们会被重叠，这种行为是由早期运行ning 引起的masonry 在加载所有视频元素之前，因为 imagesloaded 无法检查 videos loaded。

这是代码。

$(document).ready(function(){
    var $container = $('#media');
    var no_more_media = "<?= Lang::get('lang.no_more_to_load') ?>";
    var loading_more_media = "<?= Lang::get('lang.loading_more_media') ?>";

    $container.imagesLoaded(function(){
            $container.masonry();
        });

$container.infinitescroll({
        loading: {
            finished: undefined,
            finishedMsg: "<p>" + no_more_media + "</p>",
            img: "data:image/gif;base64,R0lGODlhAQABAHAAACH5BAUAAAAALAAAAAABAAEAAAICRAEAOw==",
            msg: null,
            msgText: "<div class='loading'><i></i><i></i><i></i></div><p>" + loading_more_media + "</p>",
            selector: null,
            speed: 'fast',
            start: undefined,
        },
        navSelector  : "ul.pagination",            
                       // selector for the paged navigation (it will be hidden)
        nextSelector : "ul.pagination a:first",    
                       // selector for the NEXT link (to page 2)
        itemSelector : ".container #media .item",
        animate: false,
        bufferPx: 160,
      },

      function( newElements ) {
         // hide new items while they are loading
        //var $newElems = 
        $.each($(newElements), function(index, value){
            item_click_events($(value));
        });

            $( newElements ).css({ opacity: 0 });

            $(newElements).imagesLoaded(function(){
               var $newElems = $( newElements );
               $newElems.animate({ opacity: 1 });
               $container.masonry( 'appended', $newElems, true);
            }
            );

      });
});

我也试过在上面的代码中将 document.ready 更改为 window.load，并完全删除运行ning imagesloaded，但它不适用于 infinitescroll .,

例如修改后的代码

$(window).load(function(){
    var $container = $('#media');
    var no_more_media = "<?= Lang::get('lang.no_more_to_load') ?>";
    var loading_more_media = "<?= Lang::get('lang.loading_more_media') ?>";

            $container.masonry();

    $container.infinitescroll({
        loading: {
            finished: undefined,
            finishedMsg: "<p>" + no_more_media + "</p>",
            img: "data:image/gif;base64,R0lGODlhAQABAHAAACH5BAUAAAAALAAAAAABAAEAAAICRAEAOw==",
            msg: null,
            msgText: "<div class='loading'><i></i><i></i><i></i></div><p>" + loading_more_media + "</p>",
            selector: null,
            speed: 'fast',
            start: undefined,
        },
        navSelector  : "ul.pagination",            
                       // selector for the paged navigation (it will be hidden)
        nextSelector : "ul.pagination a:first",    
                       // selector for the NEXT link (to page 2)
        itemSelector : ".container #media .item",
        animate: false,
        bufferPx: 160,
      },

      function( newElements ) {
         // hide new items while they are loading
        //var $newElems = 
        $.each($(newElements), function(index, value){
            item_click_events($(value));
        });

            $( newElements ).css({ opacity: 0 });

               var $newElems = $( newElements );
               $newElems.animate({ opacity: 1 });
               $container.masonry( 'appended', $newElems, true);

      });
});

我可以通过指定视频宽度和高度来解决这个重叠问题，但由于其响应式设计，指定视频宽度和高度会破坏响应能力。

所以我的问题是，是否有任何类似于 imagesloaded 的 js 库，它确保所有视频都已加载，然后我可以调用 masonry？或者我如何确保视频不会在 infinitescroll 上播放 overlapped？

更新 1：

我尝试了很多技术，为了无限滚动

$(newElements).load(function(){
   var $newElems = $( newElements );
   $newElems.animate({ opacity: 1 });
   $container.masonry( 'appended', $newElems, true);
});

页面滚动后不加载新内容。

$(window).load(function(){
   var $newElems = $( newElements );
   $newElems.animate({ opacity: 1 });
   $container.masonry( 'appended', $newElems, true);
});

页面滚动后不加载新内容。

   var $newElems = $( newElements );
   $newElems.animate({ opacity: 1 });
   $container.masonry( 'appended', $newElems, true);

重叠视频内容

所以我想出了提前调用 infinite-scroll 并将 container.masonry 减慢 3 秒的方法，目前效果很好。但仍在等待适当的解决方案。

例如

bufferPx: 700,

setTimeout(function(){
       var $newElems = $( newElements );
       $newElems.animate({ opacity: 1 });
       $container.masonry( 'appended', $newElems, true);
}, 3000);

以上是运行ning 砌体延迟 3 秒。

我试着为 div 寻找类似 window.load 的东西，但有 none，所以我最好的选择是检查是否所有 videos 和 images 被加载然后在调用 infinite-scroll

之后调用 masonry

添加了工作演示http://plnkr.co/edit/46YzHBJ7eFAXfsPqZB1q 您可以通过单击运行并向下滚动来查看问题。

Answer 1

看来您可以通过等待视频的 loadeddata 事件来修复它

基本思路如下：

function waitForvidLoad(vids, callback) {
     /* if no videos i.e. mobile mode only gifs and jpgs then call callback else masonry breaks.*/
        if(vids.length === 0){
            callback();
        }
    var vidsLoaded = 0;
    vids.on('loadeddata', function() {
      vidsLoaded++;
      if (vids.length === vidsLoaded) {
        callback();
      }
    });
  }

.

  var $container = $('#container');
  var vids = $('#container').find('video');
  waitForvidLoad(vids, function() {
    $container.imagesLoaded(function() {
      $container.masonry({
        itemSelector: '.box',
        columnWidth: 100
      });
  });

在这里工作的 plunker： http://plnkr.co/edit/jXJ7oFxF3sFWBAJuBqdQ?p=preview

如何仅在所有 html5 视频加载无限滚动后才运行砌体？

How to run masonry only after all html5 videos are loaded with infinitescroll?

javascript

jquery-masonry

infinite-scroll

imagesloaded

如何仅在所有 html5 视频加载无限滚动后才 运行 砌体？

How to run masonry only after all html5 videos are loaded with infinitescroll?

javascript

jquery-masonry

infinite-scroll

imagesloaded

如何仅在所有 html5 视频加载无限滚动后才运行砌体？