DrewDahlman / Mason

Mason.js for creating a perfect grid with jQuery.
http://masonjs.com/
MIT License
1.22k stars 184 forks source link

Multiple Grids, Lazy Load, Destroy Method, and then the Resize #45

Open UnaOmnia opened 9 years ago

UnaOmnia commented 9 years ago

My issue is specifically the resize. If I lazy load 3 grids, and destroy the mason callback on each, then when the window resizes I run a function to run mason on each grid. I do this essentially to stop grid#2 from resizing grid#1 and grid#3 from resizing grid#2, and so on, as they are lazy loaded. I use the destroy method, more specifically JQuery's .off().

Then I run a foreach to target each grid for the mason on window resize, but that is slow. Takes about 3-4 seconds for 1 grid, and about 6-10 seconds for 6 grids. That means the user has to wait 6-10 seconds for the grids to resize, and even to use scroll functionality. So I was wondering, how can I run it quicker?

Can I use a selector that gets all grids? Will the fillers still be different from each other? I.e. I have grid#1 targeting box#1 and filler#1 and making a custom class custom _filler#1, and same for grid#2 and box#2 filler#2 custom_filler#2 and so on. So I want the order to remain the same as well.

Would that work? What will be the fastest way to run mason on 6-10 grids?

ensemblebd commented 8 years ago

Unminified version edits..

Line ~# 75 +2

setup = function(current_self) {
    if (typeof(current_self)!=='undefined' && current_self != null &&  !$self.is($(current_self))) 
        $self=$(current_self); // forcing current context to use correct origin

and on line # 301

    return resize = setTimeout(function() {
        return setup(_this); // giving it context based on bound event origin
     }, 0);

This allows multiple grids to exist on same page. The resize event doesn't respect context of origin object, it just uses the last known "$self". So here I force the context to be valid. It should negate the need for some of the stuff you are having to do manually (unbind fluid resize event, and handling it manually). Not sure exactly on your requirements. Just wanted to mention this because I ran into the problem also.

DrewDahlman commented 8 years ago

Would you mind putting this as a pull request? I would like to test it.

ensemblebd commented 8 years ago

Sure thing, if not today then tomorrow, working around the deadlines :)

DrewDahlman commented 8 years ago

:+1: