1

I'm looking for a way to trigger some code once an image has been completely rendered within the browser. I am using isotopes masonry http://isotope.metafizzy.co/ plugin that uses the height of the element to calculate the Masonry layout, but unfortunately the onShow and onRender events fire too early, before the image has fully loaded and rendered and therefore the wrong height is being calculated by isotope. I tried using https://github.com/desandro/imagesloaded to help solve the issue, but the code is still firing too early. Any suggestions how I can ask the ItemView to wait until the image is fully displayed within the 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
          }
        })
      })
    }
  })

I've also tried

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
      }
  })
}
})
2
  • Why don't you set a hard height and width size to the element instead of waiting for the image to be loaded. That way you know what sizes it is beforehand. I personally use CSS for images on a div because I can stretch it or fill the container and center.
    – AlexandruB
    Jan 16, 2016 at 15:36
  • Hi Yes that's what I did but it then requires me to unset it later so that I can allow for the window to be resized if the user wants and for the elements to be able to respond to that event. Jan 19, 2016 at 12:49

1 Answer 1

0

It appears load events don't work as expected in the events hash as suggested here, so you can connect these using addEventListener something like this:


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);
        });
    }

}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.