kombai / freewall

Freewall is a cross-browser and responsive jQuery plugin to help you create grid, image and masonry layouts for desktop, mobile, and tablet...
MIT License
1.85k stars 375 forks source link

Not all tiles are loading on small window sizes #227

Open Hyperchema opened 8 years ago

Hyperchema commented 8 years ago

I just got freewall up and running on my new website and it's working great if the first page load is at a large screen size (1024 or higher). However, if I start with a small viewport width and refresh the page, only the first 3 of my tiles appear. Even after expanding the window, still many of them are missing. If I load the page at a large viewport and shrink it down, all tiles load and stay visible down to the smallest screen size. I am very confused why this is happening. I thought it was simply a CSS thing but then the tiles that load should disappear after the viewport is shrunk down. The problem is only on the initial load. Here is the JS I'm using in my file. Other than that it's just the base freewall.js file. I haven't made any changes to it. Let me know if you have an idea why it's doing this. Thanks!

            var wall = new Freewall('#freewall');
            var start = new Date().getTime();
              wall.reset({
                selector: '.home-tile',
                animate: true,
                gutterX: 15,
                gutterY: 15,
                cellW: 125,
                cellH: 125,
                onResize: function() {
                    wall.fitWidth();
                },
                onComplete: function() {
                    console.log("Showup", new Date().getTime() - start);
                }
            });

            wall.addCustomEvent("onGridReady", function(container, setting) {
                start = new Date().getTime();
            });

            wall.addCustomEvent("onGridArrange", function(container, setting) {
                console.log("Arrange", new Date().getTime() - start);
                start = new Date().getTime();
            });

            var images = wall.container.find('.home-tile');
            images.find('img').load(function() {
                wall.fitWidth();
            });