加载图像上的木偶 ItemView 事件答案

【问题标题】：Marionette ItemView Event on image loaded加载图像上的木偶 ItemView 事件
【发布时间】：2016-01-11 15:14:31
【问题描述】：

我正在寻找一种在图像在浏览器中完全呈现后触发某些代码的方法。我正在使用同位素砌体http://isotope.metafizzy.co/ 插件，它使用元素的高度来计算砌体布局，但不幸的是onShow 和onRender 事件在图像完全加载和渲染之前触发得太早，因此高度错误是用同位素计算的。我尝试使用https://github.com/desandro/imagesloaded 来帮助解决问题，但代码仍然触发得太早。有什么建议可以让 ItemView 等到图像在 DOM 中完全显示？

List.Recipe = Marionette.ItemView.extend({
    template: '#recipe-list-item',
    model: this.model,
    className: 'isotope--recipe',
    serializeData: function () {
      var data = this.model.toJSON()
      return data
    },
    onShow: function () {
      $(this).imagesLoaded().done( function () {
        $('.isotope--recipes').isotope({
          itemSelector: ".isotope--recipe",
          masonry: {
            gutter: 25
          }
        })
      })
    }
  })

我也试过

List.Recipe = Marionette.ItemView.extend({
    template: '#recipe-list-item',
    model: this.model,
    className: 'isotope--recipe',
    serializeData: function () {
      var data = this.model.toJSON()
     return data
    },
    initialize: function () {
      Marionette.bindEntityEvents(this, this, this.events)
    },
    triggers: {
      'load img': 'image:loaded'
    },
    events: {
      'image:loaded': 'masonryise'
    },
    masonryise: function () {
      $('.isotope--recipes').isotope({
      itemSelector: ".isotope--recipe",
      masonry: {
       gutter: 25
      }
  })
}
})

【问题讨论】：

为什么不给元素设置一个硬性的高度和宽度大小，而不是等待图像被加载。这样你就可以事先知道它的尺寸。我个人对 div 上的图像使用 CSS，因为我可以拉伸它或填充容器和中心。
嗨，是的，这就是我所做的，但它需要我稍后取消设置，以便我可以允许在用户想要时调整窗口大小并且元素能够响应该事件.

标签： jquery marionette jquery-events backbone-views

【解决方案1】：

在suggested here 的事件哈希中，加载事件似乎无法按预期工作，因此您可以使用 addEventListener 连接这些事件，如下所示：


layout: function (container) {
    var that = this;
    if (that.layoutComplete) {
        return;
    }
    if (!that.msnry) {
        that.msnry = new Masonry(container,
            {
                gutter: 10,
                itemSelector: '.item'
            });
    }

    if (!that.images) {
        that.images = Array.from(that.el.querySelectorAll(".masonry img"));
        //load events don't seem to fire from the events hash so connect them manually
        that.images.forEach((i) => i.addEventListener("load",
            function(evt) {
                that.layout();
            }));
    }

    if (that.images.every(function (img) { return img.complete; })) {
        that.layoutComplete = true;
        //final layout once all finished
        that.msnry.layout();
    } else if (!that.firstLayoutComplete && that.images.slice(0, 10).every(function (img) { return img.complete; })) {
        that.firstLayoutComplete = true;
        //layout once first 10 are loaded to appear responsive
        that.msnry.layout();
    }
},

onShow: function () {
    var container = this.el.querySelector('.masonry>div');

    if (document.readyState === "complete") {
        this.layout(container);
    } else {
        jQuery(window).on("load", function () {
            this.layout(container);
        });
    }

}

【讨论】：