On refreshing page masonry work ok, but first time overlaps

Asked 30/12, 2012 at 8:38 Answered 3/9, 2016 at 12:20

Solved javascript jquery asp.net jquery-masonry

When my page load first time masonry overlaps images, and if i refresh page it start work fine. i dnt have any idea what i did wrong. my page link is this www.bhinderblink.com

<script type="text/javascript">
    $(window).load(function () {
        $('#container').masonry({
            // options
            itemSelector: '.box',
            columnWidth: 240,
            isAnimated: true,
             isFitWidth: true,
            animationOptions: {
                duration: 650,
                easing: 'linear',
                queue: false
            }
        });
    });   


</script>

On Success of .ajax, it fetch data from xmlobject...

function OnSuccess(response) {
        var xmlDoc = $.parseXML(response.d);
        var xml = $(xmlDoc);

        pageCount = parseInt(xml.find("PageCount").eq(0).find("PageCount").text());

        var pic_infoVar = xml.find("pic_info");

        pic_infoVar.each(function () {
            var customer = $(this);
            //...........

            var $picString = $("<div class='box'><img id='theImg' src='/pic/jas/" + customer.find("pic_name").text() + ".jpg" + "'/><div>Detail2</div></div>");
            $("#container").append($picString).masonry('appended', $picString, true);

        });

        $("#imgloader").hide();
        $("body").css({ "opacity": "100" });
    }

Dedededen answered 30/12, 2012 at 8:38 Comment(4)

I checked your link and everything looks ok. Try to clear/disable cache from your browser – Bifid 30/12, 2012 at 9:5

it work fine 2 times out of 20. first close the page fully and try reopen it 2 3 times, then u will notice that, when you scroll down the next 15 pics over laps. but if u refresh opened page it load pics perfectly – Dedededen 30/12, 2012 at 10:1

I am not sure where the problem is but first time you have to solve the error shown in console : img822.imageshack.us/img822/9118/2012123017h2815.jpg . – Bifid 30/12, 2012 at 15:29

I searched in full code but there is no error related to 404 or broken link. i try firebug too. – Dedededen 30/12, 2012 at 19:42

I also has the similar issue, images were overlapping at the first loading time. I overcome this by first loading the images.

 $(".id").imagesLoaded(function(){
    $('.id').masonry({
                itemSelector: '.scrapcontent',
                columnWidth: 3,
                isAnimated:true,
                animationOptions: {
                    duration: 700,
                    easing:'linear',
                    queue :false
               }
         });
}

If the images are loaded then only your masonry's duty has to start.It should work fine.

Truncheon answered 21/3, 2013 at 18:20 Comment(1)

This solution not working in Safari on iOS :( Not really – Cavalla 21/9 at 22:50

It's because of the script is being run before the content (Images) is not fully loaded. Hence the positioning error.

Try this :-

<head>
<script>
      $(window).load(function(){
          $('#selector').masonry({
               itemSelector : '.item',
               columnWidth : 200,
               isAnimated: true,
               animationOptions: {
                    duration: 700,
                    easing: 'linear',
                    queue: false
               }
          });
      });
</script>
</head>

Colour answered 3/9, 2016 at 12:20 Comment(0)

Recommended topics

Hot tags