Masonry: DIVs overlap even after I add imagesLoaded and 'reload'

StackOverflow https://stackoverflow.com/questions/22444770

Question 

$(document).ready(function(){
    // SECTION 1
    // Seting up the element which contains the divs that will be used in the Masonry
    var $galWrapper = $('#gallery-wrapper');
    $galWrapper.imagesLoaded(function(){
        $galWrapper.fadeIn(1000) // #gallery-wrapper's CSS 'display' property is 'none' when web page is opened. Then it fades in after the images are loaded
            .masonry({
                itemSelector: '.picture-wrapper',
                transitionDuration: 0
            });
    });


    // SECTION 2: SCROLL PAGINATION
    var $doc = $(document);
    var $win = $(window);
    var isFetchingPics = false; // boolean variable to see if script is fetching items from the server
    var imgFirst = 0;

    $win.scroll(function(){
        var $scroll = $win.scrollTop();
        var $docHeight = $doc.height();
        var $winHeight = $win.height();

        // If-statement triggers when user reaches near bottom of page
        if( $scroll >= ($docHeight - $winHeight - 800) ){
            if(!isFetchingPics){
                isFetchingPics = true;
                imgFirst = imgFirst+20; // This tells the server-side script which row to start from

                $.get(
                    'index.php',
                    {
                        img_first: imgFirst
                    },
                    function(responseHTML){
                        $responseHTML = $(responseHTML); // responseHTML is something like '<div id="10" class="picture-wrapper"><img src="http://i.imgur.com/whatever.jpg"></div> <div id="11" class="picture-wrapper"><img src="http://i.imgur.com/some-picture.jpg"></div>' ... 

                        // Here's where I'm getting trouble, I think. Even though this whole thing is wrapped in 'imagesLoaded', the DIVs that contain the pics still overlap each other on load. 
                        // However, if I wait for all the images to load, and reload the page, then there is usually no overlap when images get appended
                        $galWrapper.imagesLoaded(function(){
                            $galWrapper.append($responseHTML).masonry('appended', $responseHTML, 'reload'); // I've tried both 'reload' and 'reloadItems', but nothing works

                            isFetchingPics = false;
                        });
                    }
                );
            };
        };
    });
}); // DONE: $(document).ready

OK, here's the problem: when I scroll down, my script sends a GET request to the server and retrieves a bunch of DIVs to put in #gallery-wrapper. I wrap the .append function in .imagesLoaded but the pictures still overlap one another the first time the web page loads.

But if I hit refresh in my browser, and scroll down again, then the pictures load just fine -- without overlap. I thought that the 'reload' part on this line ($galWrapper.append($responseHTML).masonry('appended', $responseHTML, 'reload');) would make the script reload the images, and thus stop the overlap, but there is still overlap. I also tried using 'reloadItems', but that did not solve the problem either.

Why? How do I make it so that the pics load correctly the first time around?

My browser is FireFox v27.0.1

EDIT: Here's what I have in my <head> area. Masonry and ImagesLoaded are both v3.1.4

<!DOCTYPE HTML>
<html>
    <head>
        <link rel="stylesheet" href="./css/style.css?v=0.1"> <!-- Site CSS -->

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <!-- jQuery -->
        <script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script> <!-- jQuery tools -->
        <script src="./js/imagesloaded.pkgd.min.js"></script> <!-- imagesLoaded -->
        <script src="./js/masonry.pkgd.min.js"></script> <!-- Masonry -->
        <script src="./js/script.js?v=0.1"></script> <!-- Site script -->
    </head>

EDIT 2: THE PROBLEM OF OVERLAPPING IMAGES IS SOLVED I changed this...

$galWrapper.imagesLoaded(function(){
    $galWrapper.append($responseHTML)
        .masonry('appended', $responseHTML, 'reload);
});

to this...

$galWrapper.append($responseHTML).imagesLoaded(
    function(){
        $galWrapper.masonry('appended', $responseHTML);
        isFetchingPics = false;
    }
);

For some reason, putting the $.append() method outside .imagesLoaded stops overlapping. I now have a new problem where the newly-loaded images load in a single column to the left before going into masonry form. But at least the overlapping problem is fixed.

Était-ce utile?

La solution

Have you looked at this thread on github?

https://github.com/desandro/masonry/issues/374

As I read it, it's dealing with the same issues you're having, fixing it by filtering the get results.

Also, there's this thread on github about appending with ajax:

https://github.com/desandro/masonry/issues/520

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top